鼠標滾動 - 捕捉到的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>