鼠标滚动 - 捕捉到的div

Question

我现在有一个页面中的

<div id="content"> 
    <div id="content-page-1"> 
    <!--content--> 
    </div> 
    <div id="content-page-2"> 
    <!--content--> 
    </div> 
</div> 

形式有什么办法，使滚动要么

1. 棒/捕捉到的div（这是100％的高度和显示区域的100％的宽度）
2. 自动滚动到下一个格滚动时检测

与jquery？

Answer 1

如果你听你的节点上的滚动事件，你可以很容易地使用像scrollTo插件平滑滚动到“下一个div”或先前的div（但你定义）。

var prevScrollTop = 0; 
var $scrollDiv = $('div#content'); 
var $currentDiv = $scrollDiv.children('div:first-child'); 
$scrollDiv.scroll(function(eventObj) 
{ 
    var curScrollTop = $scrollDiv.scrollTop(); 
    if (prevScrollTop < curScrollTop) 
    { 
    // Scrolling down: 
     $currentDiv = $currentDiv.next().scrollTo(); 
    } 
    else if (prevScrollTop > curScrollTop) 
    { 
    // Scrolling up: 
     $currentDiv = $currentDiv.prev().scrollTo(); 
    } 
    prevScrollTop = curScrollTop; 
}); 

Answer 2

我尝试了不同的插件，但他们都有在MVC多个事件触发的问题，所以我使用underscore.js

<script type="text/javascript"> 
    $(document).ready(function() { 
      var isc = _.throttle(function (event) { 
       if ($(window).scrollTop() + $(window).height() > $(document).height() - 200) { 
        if (event.handled !== true) { 
         $.post('@path', function (html) { 
          $('#user-feed').append(html); 
         }); 
        } 
       } 
      }, 300); 

      $(window).scroll(isc); 
    }); 

</script>