javascript - jQuery如何在到达容器末尾时捕捉到容器

Question

所以这个脚本做了我想要的，只是它不能在固定高度上工作。它只适用于“高度:100%；”:

http://benoit.pointet.info/stuff/jquery-scrollsnap-plugin/

所以我真正想要的是一个在到达 div 末尾时会捕捉的插件，因此 div 可以是任何高度。

我页面的每个 div 大约为 2000 像素，因此当用户到达 div 的底部时，它会捕捉到下一部分(如果用户没有向下滚动足够多则捕捉到当前部分)，如插件所示。

感谢您的回答!

Answer 1

我会查看 waypoints插件。

我将我的演示更改为在当前部分到达底部时捕捉。

如果用户没有滚动到当前部分的顶部，因为部分高度很大并且您将无法看到该部分的内容，那么您不应该捕捉到当前部分的顶部。

演示

http://jsfiddle.net/T89LF/4/show

http://jsfiddle.net/T89LF/4/

HTML

<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

jQuery

$('section').waypoint(function(direction) { 
    if(direction == 'down'){
        disable_scroll();
        //Animate to top of the section
        $('html, body').stop().animate({ 
            scrollTop: $(this).offset().top
        },300,"easeInOutQuart", function() {
           enable_scroll();
        });
    }
}, { offset: '100%' }); 

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function wheel(e) {
  preventDefault(e);
}

function disable_scroll() {
  if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', wheel, false);
  }
  window.onmousewheel = document.onmousewheel = wheel;
}

function enable_scroll() {
    if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', wheel, false);
    }
    window.onmousewheel = document.onmousewheel = null;  
}