如何检查元素是否穿过窗口屏幕/视口的顶部/底部？

Question

如何查看元素跨窗口屏幕：

• 十字顶部 - 从向上滚动
• 十字顶部 - 从下滚动
• 十字底部 - 从上滚动
• 十字底部 - 从向下滚动

有什么解决办法吗？

Answer 1

/ 交叉 - 顶部 - 从 - 向上滚动 /

if( jQuery(window).scrollTop() <= jQuery('#ELEMENT').offset().top ) {
    console.log('Crossed top - from up scroll');
}

/ 交叉 - 顶部 - 从 - 向下 滚动 /

if( jQuery(window).scrollTop() >= jQuery('#ELEMENT').offset().top ) {
    console.log('Crossed top - from down scroll');
}

/ 交叉 - 底部 - 从 - 向下滚动 /

if( jQuery(window).scrollTop() >= jQuery('#ELEMENT').offset().top + jQuery('#ELEMENT').outerHeight() - window.innerHeight) {
    console.log('crossed bottom from - down scroll');
}

/ 交叉 - 底部 - 从 - 向上 滚动 /

if( jQuery(window).scrollTop() <= jQuery('#ELEMENT').offset().top + jQuery('#ELEMENT').outerHeight() ) {
    console.log('crossed bottom from - up scroll');
}

Answer 2

在普通 JS 中

// Crossed - TOP - from - UP Scrolling
if (window.scrollY <= document.getElementById('ELEMENT').offsetTop) {
    console.log('Crossed top - from up scroll');
}

// Crossed - TOP - from - DOWN Scrolling
if (window.scrollY >= document.getElementById('ELEMENT').offsetTop) {
    console.log('Crossed top - from down scroll');
}

// Crossed - BOTTOM - from - DOWN Scrolling
if (window.scrollY >= document.getElementById('ELEMENT').offsetTop + document.getElementById('ELEMENT').offsetHeight - window.innerHeight) {
    console.log('crossed bottom from - down scroll');
}

// Crossed - BOTTOM - from - UP Scrolling
if (window.scrollY <= document.getElementById('ELEMENT').offsetTop + document.getElementById('ELEMENT').offsetHeight) {
    console.log('crossed bottom from - up scroll');
}