Javascript 在用户完成滚动主体后设置scrollTop动画

设置以下CSS时，我无法在

正文上使用
滚动条
：

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);

});

一把小提琴显示它不起作用：

我已经在其他CSS情况下测试了代码，它确实有效。当CSS设置为如上所述时，如何使用JS/jQuery滚动正文？
删除此CSS：

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

改变

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

致：

我不能删除CSS，它是设计的必要部分。它会阻止像Chrome这样的浏览器产生滚动反弹效果。正如我在问题中所说，我已经在其他CSS情况下测试了代码。不过，我需要一个问题中CSS的解决方案。请参阅：
垂直滚动位置与可滚动区域上方视图中隐藏的像素数相同。如果滚动条位于最顶端，或者元素不可滚动，则该数字将为0。
您遇到的问题是，在CSS中设置
溢出：hidden
会阻止scrollTop报告除零以外的值，我不确定是否有解决方法，但正在滚动的元素是值为
overflow:auto
的主体。。。
$(window).scroll(function(){