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';
 | 
					import Vue from 'vue';
 | 
				
			||||||
 | 
					import { getScrollPosition, onScrollTop } from './scroll';
 | 
				
			||||||
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 });
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
const SECOND_FETCH_LIMIT = 30;
 | 
					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