enhance(client): Better element visible detection
This commit is contained in:
		
							parent
							
								
									c54d5e7040
								
							
						
					
					
						commit
						6870262f8d
					
				
					 2 changed files with 10 additions and 5 deletions
				
			
		|  | @ -1,5 +1,4 @@ | |||
| import Vue from 'vue'; | ||||
| import { getScrollPosition, onScrollTop } from './scroll'; | ||||
| import { onScrollTop, isTopVisible } from './scroll'; | ||||
| 
 | ||||
| const SECOND_FETCH_LIMIT = 30; | ||||
| 
 | ||||
|  | @ -148,7 +147,7 @@ export default (opts) => ({ | |||
| 		}, | ||||
| 
 | ||||
| 		prepend(item) { | ||||
| 			const isTop = this.isBackTop || (document.body.contains(this.$el) && (getScrollPosition(this.$el) === 0)); | ||||
| 			const isTop = this.isBackTop || (document.body.contains(this.$el) && isTopVisible(this.$el)); | ||||
| 
 | ||||
| 			if (isTop) { | ||||
| 				// Prepend the item
 | ||||
|  |  | |||
|  | @ -13,12 +13,18 @@ export function getScrollPosition(el: Element | null): number { | |||
| 	return container == null ? window.scrollY : container.scrollTop; | ||||
| } | ||||
| 
 | ||||
| export function isTopVisible(el: Element | null): boolean { | ||||
| 	const scrollTop = getScrollPosition(el); | ||||
| 	const topPosition = el.offsetTop; // TODO: container内でのelの相対位置を取得できればより正確になる
 | ||||
| 
 | ||||
| 	return scrollTop <= topPosition; | ||||
| } | ||||
| 
 | ||||
| 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) { | ||||
| 		if (isTopVisible(el)) { | ||||
| 			cb(); | ||||
| 			container.removeEventListener('scroll', onScroll); | ||||
| 		} | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue