javascript - 如何使用 jQuery 检测用户何时滚动到页面上的某个区域？

<分区>

Possible Duplicate:
How to detect page scroll to a certain point in jQuery?
Check if element is visible after scrolling

我如何检测用户何时到达此 div:

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div id="theTarget">I have been reached</div>

编辑

得到这个问题的答案:

Check if element is visible after scrolling

所以我只是这样做了:

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).scroll(function() {    
    if(isScrolledIntoView($('#theTarget')))
    {
        alert('visible');
    }    
});

最佳答案

将页面滚动位置与您的元素顶部位置进行比较，然后调用您的函数。

jQuery

$(document).on('scroll', function() {
  if ($(this).scrollTop() >= $('#theTarget').position().top) {
    console.log('I have been reached');
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="theTarget">I have been reached</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

ES6(纯 JS，无 jQuery)

var target = document.querySelector('#theTarget');

document.addEventListener('scroll', () => {
  if (window.scrollY >= target.getBoundingClientRect().top) {
    console.log('I have been reached');
  }
})

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="theTarget">I have been reached</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

关于javascript - 如何使用 jQuery 检测用户何时滚动到页面上的某个区域？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7182342/

上一篇：javascript - undefined variable ，value == false 与 !value

下一篇：javascript - 如何获取可选择的 jquery 元素的 innerHTML？

相关文章：

javascript - 在 ajax 加载的页面上执行 JQuery 操作

php - 在浏览器上显示保存在 gridfs 中的 pdf 文件的预览

javascript - 单击指定类以外的任意位置

JavaScript 初始化函数

javascript - XMLHttpRequest 传递响应的快捷方式 (4)？

javascript - Javascript 中的过滤逻辑 - 查找数组中的值范围

javascript - JSON 样式返回 object 对象

javascript - woocommerce 插件无法与 WordPress 主题配合使用的典型原因是什么？

javascript - 带标题的图片 - vuepress

javascript - Twitter-bootstrap 导航栏下拉菜单表现异常(不在移动设备上工作，不在桌面上显示)