Question

当页面滚动到足以让div进入视图时，是否有某种方法可以使用jQuery触发事件？

Answer 1

我认为您必须挂钩滚动事件并手动检查。这是一个类似的问题：

Check if element is visible after scrolling

希望有所帮助。

鲍勃

Answer 2

如果你只需要开火一次：

$(window).scroll(function(){
  // This is then function used to detect if the element is scrolled into view
  function elementScrolled(elem)
  {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
  }

  // This is where we use the function to detect if ".box2" is scrolled into view, and when it is add the class ".animated" to the <p> child element
  if(elementScrolled('. box2')) {


  // Your function here

  }
});

完整答案：https://www.thewebtaylor.com/articles/how-to-detect-if-an-element-is-scrolled-into-view-using-jquery

Answer 3

航点插件涵盖了这一点以及更多内容。 http://imakewebthings.com/jquery-waypoints/

文档：http://imakewebthings.com/jquery-waypoints/#docs

例如：

$('.someSelector').waypoint(function(direction){
//do stuff 
},{
 //bottom-in-view will ensure event is thrown when the element's bottom crosses
 //bottom of viewport.
 offset: 'bottom-in-view'
});

Answer 4

一个jQuery插件，它添加了一个可绑定的＆＃39; inview＆＃39;用于检测元素何时滚动到视图中的事件。

https://github.com/protonet/jquery.inview

Answer 5

如果你想在视图底部触发一个功能，点击你的内容，可以使用这个功能：

$('.ModuleWrapper').waypoint(function (direction) {
    // Codes Here
}, {
    offset: function () {
        return $(this).height();
    }
});

或者在视图底部，点击内容的底部，您也可以使用此功能：

$('.ModuleWrapper').waypoint(function (direction) {
    // Codes Here
}, {
    offset: function () {
        return -1 * $(this).height();
    }
});

它使用waypoint

jQuery：当div进入视图时，如何触发事件？

5 个答案: