在用户完成滚动主体后为scrollTop动画

Animate scrollTop after user finished scrolling body

本文关键字：scrollTop 动画 主体 滚动 用户      更新时间：2023-09-26

当设置以下CSS时，我很难让scrollTop在body上工作:

html, body { height: 100%; }
html { overflow: hidden; }
body { overflow: auto; }

我想要实现的是页面总是滚动到150px的网格。例如，如果用户向下滚动161px的页面，在他们完成滚动后，页面将自动滚动回150px。

下面是目前为止的代码: 
//timer
var timer = null;
//body scroll
$('body').scroll(function(){
  //clear timer
  if (timer !== null) clearTimeout(timer);
  //set timer
  timer = setTimeout(function() {
    //scroll calculations
    var sectionOffset = $('body').scrollTop(),
        scrollAmount = Math.round(sectionOffset/150) * 150,
        scrollPx = scrollAmount + 'px';
    //lock to grid
    $('body').animate({scrollTop:scrollPx},200,'linear');
  },300);
});

和一个提琴显示它不工作:http://jsfiddle.net/swjabxqq/1/

我已经在其他CSS情况下测试了代码，它确实有效。当CSS如上所述设置时，我如何使用JS/jQuery滚动body ?

删除此CSS:

html { overflow: hidden; }
body { overflow: auto; }

和改变

$('body').scroll(function(){

: 

$(window).scroll(function(){

演示小提琴

相关文章：