Refactor: Extract scroll utility functions
This commit is contained in:
		
							parent
							
								
									828c7b66a0
								
							
						
					
					
						commit
						a5b92e316c
					
				
					 2 changed files with 28 additions and 28 deletions
				
			
		| 
						 | 
				
			
			@ -1,32 +1,5 @@
 | 
			
		|||
import Vue from 'vue';
 | 
			
		||||
 | 
			
		||||
function getScrollContainer(el: Element | null): Element | null {
 | 
			
		||||
	if (el == null || el.tagName === 'BODY') return null;
 | 
			
		||||
	const style = window.getComputedStyle(el);
 | 
			
		||||
	if (style.getPropertyValue('overflow') === 'auto') {
 | 
			
		||||
		return el;
 | 
			
		||||
	} else {
 | 
			
		||||
		return getScrollContainer(el.parentElement);
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function getScrollPosition(el: Element | null): number {
 | 
			
		||||
	const container = getScrollContainer(el);
 | 
			
		||||
	return container == null ? window.scrollY : container.scrollTop;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function onScrollTop(el, cb) {
 | 
			
		||||
	const container = getScrollContainer(el) || window;
 | 
			
		||||
	const onScroll = ev => {
 | 
			
		||||
		if (!document.body.contains(el)) return;
 | 
			
		||||
		const pos = getScrollPosition(el);
 | 
			
		||||
		if (pos === 0) {
 | 
			
		||||
			cb();
 | 
			
		||||
			container.removeEventListener('scroll', onscroll);
 | 
			
		||||
		}
 | 
			
		||||
	};
 | 
			
		||||
	container.addEventListener('scroll', onScroll, { passive: true });
 | 
			
		||||
}
 | 
			
		||||
import { getScrollPosition, onScrollTop } from './scroll';
 | 
			
		||||
 | 
			
		||||
const SECOND_FETCH_LIMIT = 30;
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
							
								
								
									
										27
									
								
								src/client/scripts/scroll.ts
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										27
									
								
								src/client/scripts/scroll.ts
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
				
			
			@ -0,0 +1,27 @@
 | 
			
		|||
export function getScrollContainer(el: Element | null): Element | null {
 | 
			
		||||
	if (el == null || el.tagName === 'BODY') return null;
 | 
			
		||||
	const style = window.getComputedStyle(el);
 | 
			
		||||
	if (style.getPropertyValue('overflow') === 'auto') {
 | 
			
		||||
		return el;
 | 
			
		||||
	} else {
 | 
			
		||||
		return getScrollContainer(el.parentElement);
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function getScrollPosition(el: Element | null): number {
 | 
			
		||||
	const container = getScrollContainer(el);
 | 
			
		||||
	return container == null ? window.scrollY : container.scrollTop;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function onScrollTop(el: Element, cb) {
 | 
			
		||||
	const container = getScrollContainer(el) || window;
 | 
			
		||||
	const onScroll = ev => {
 | 
			
		||||
		if (!document.body.contains(el)) return;
 | 
			
		||||
		const pos = getScrollPosition(el);
 | 
			
		||||
		if (pos === 0) {
 | 
			
		||||
			cb();
 | 
			
		||||
			container.removeEventListener('scroll', onscroll);
 | 
			
		||||
		}
 | 
			
		||||
	};
 | 
			
		||||
	container.addEventListener('scroll', onScroll, { passive: true });
 | 
			
		||||
}
 | 
			
		||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue