如何使用jQuery检测用户滚动到页面上的特定区域？

Question

可能重复的问题:
如何在jQuery中检测页面滚动到特定位置？
当滚动后检查元素是否可见

我如何检测用户是否已经到达此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>

编辑

我从这个问题中获取了答案：

检查滚动后元素是否可见

所以我只是这样做：

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');
    }    
});

- Mike

---

可能是如何在jQuery中检测页面滚动到某一点？和当窗口滚动到某些位置时触发事件的重复问题。 - Felix Kling

请查看此问题 - https://dev59.com/FHRB5IYBdhLWcg3w3K4J - ipr101

@ipr101 是的，那个被接受的答案就可以了。 - Mike

Answer 1

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

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>

- Simon Arnold

---

这看起来比我从其他问题得到的解决方案要简单，所以它会更好，但我无法让它工作。 对于YourActionHere（），我使用了一个简单的警报，但当我滚动到目标元素时，警报不会弹出。 - Mike

在我的例子中，我正在滚动整个文档，你的情况是这样吗？也许你正在滚动文档的一部分，例如一个Div。在这种情况下，你需要用$(yourDiv)替换$(document)。 - Simon Arnold

我猜你需要去抖动事件，因为它每秒钟会触发无数次。 - imrek

@DrunkenMaster 你说得对。防抖会极大地提高性能。 - Simon Arnold

Answer 2

我认为你可以通过比较div位置的值来实现你的目标。

var divPosition = $("#theTarget").offset().top;

窗口滚动位置

var scrollPosition = window.scrollY;

- Maxx

Answer 3

我相信有一个jQuery出现的插件可以完全满足你的要求。 http://plugins.jquery.com/project/appear

$('#theTarget').appear(function() {
  $(this).text('Hello world');
});

它还涉及到调整大小、初始窗口大小等等。

- Wayne