Jquery 如何使滚动条仅以固定的间隔滚动？

我有一个固定大小和溢出的容器div:scroll，其中填充了一些较小的div，形成了一个列表。下面是一个小提琴的例子：

我想要的是，滚动永远不会剪切一个框，始终显示3个完整的框（在本例中），因此它将始终滚动固定数量的像素

我该怎么做

我正在使用jquery库

谷歌在这个问题上一直是一个严厉的女主人，因为它的关键词具有误导性

--解决方案

我能够进一步完善kiranvj代码，我对最终结果非常满意

捕捉上一个div:

var scrollTimerHandle = "";
var positionTimerHandle = "";

$("#container").scroll(function() {
    var boxSize = 84;   
    var newScrollPosition = parseInt(this.scrollTop / boxSize) * boxSize,
    _this = this;

    clearInterval(scrollTimerHandle);  
    scrollTimerHandle  = setTimeout(function() {
        positionTimerHandle = setInterval(function(){
          if (_this.scrollTop == newScrollPosition){
             clearInterval(positionTimerHandle);                   
          } else {
             _this.scrollTop--;
          }
        }, 5);         

    }, 600);   
});

捕捉到最近的div

var scrollTimerHandle = "";
var positionTimerHandle = "";

$("#container").scroll(function() {
var boxSize = 84;    
var preScrollPosition = parseInt(this.scrollTop / boxSize) * boxSize;
var newScrollPosition = this.scrollTop - preScrollPosition < boxSize /2 
                             ? preScrollPosition : preScrollPosition + boxSize;
_this = this;

clearInterval(scrollTimerHandle);

    scrollTimerHandle  = setTimeout(function() {
        positionTimerHandle = setInterval(function(){      
          if (_this.scrollTop == newScrollPosition){
            clearInterval(positionTimerHandle);
          } else {
              if (_this.scrollTop > newScrollPosition){
                _this.scrollTop--;
              } else {
                _this.scrollTop++;  
              }          
          }
        }, 5);     

    }, 700);
});

var scrollTimerHandle=“”；
var positionTimerHandle=“”；
$（“#容器”）。滚动（函数（）{
var-boxSize=84；
var preScrollPosition=parseInt（this.scrollTop/boxSize）*boxSize；
var newScrollPosition=this.scrollTop-preScrollPositionnewScrollPosition）{
_这是我的最爱；
}否则{
_这个.scrollTop++；
}          
}
}, 5);     
}, 700);
});

---

感谢所有的帮助，我不知道如何处理这个问题，今天学到了很多东西。

您可能需要删除滚动条并使用旋转木马，因为您使用的是jQuery，所以您可以使用插件。下面是一个使用

的示例，如果我理解正确，您可以尝试以下代码：

$("#container").scroll(function(){
        if($("#container").scrollTop()>=10) {
            $("#container").scrollTop(10);
        }
    }
);

---

这不是一个完美的解决方案

但类似的方法应该会奏效（注意：需要改进）

在这里拉小提琴

更新

有些代码比上面的代码更精细，没有任何其他插件或lib。（消除闪烁）

---

在此处播放

这里有一个选项，可以用一些滚动按钮替换滚动条。我通过设置

overflow:hidden删除了滚动条
HTML

这是行不通的；它所做的只是防止用户在页面上向下滚动超过10个像素，这是不完全正确的。但是你可以使用scrollTop（x）向下滚动固定位置。这是一个困难的问题，因为如果我没有弄错的话，你只能在滚动发生后检查滚动位置。这意味着，如果强制以增量滚动（在本例中，是块的高度），当容器滚动几个像素，然后向前或向后跳转时，将出现大量的口吃。您可以完全删除滚动条，并提供您自己的按钮，以所需增量滚动容器。@kiranvj得到了我的最终形式，这不是我在询问时所设想的，但我更喜欢这个。谢谢你的帮助。谢谢你的anwser，但是你需要的东西太简单了，不适合添加这个旋转木马。这是一个很好的插件。旋转木马的外观完全取决于你的风格，这个例子并不是它唯一的外观。这是一个迷人的工作方式，我相信它会适合我的代码。非常感谢你的帮助。我在卷轴上看到很多抖动，正如我在上面的评论中提到的，答案中提到的是非常基本的原始代码，需要进一步细化，并可能添加一些周围的逻辑。或者，您需要添加一个自定义滚动条，并使用一些类似的逻辑；我的评论是针对@petervazLittle添加的精炼代码@彼得瓦兹，请查收。@杰克沃兹，我想这比前一个好。
​$("#container").scroll(function() {

   this.scrollTop = parseInt(this.scrollTop / 84) * 84; // 84 = height + top and bottom margin

});​​​

var scrollTimerHandle = "";

$("#container").scroll(function() {

var newScrollPosition = parseInt(this.scrollTop / 84) * 84,
    _this = this;

    clearInterval(scrollTimerHandle);

scrollTimerHandle  = setTimeout(function() {
   _this.scrollTop = newScrollPosition ;

}, 1000);


});​ 

<div id="container">
    <!-- your blocks --> 
</div>
<div id="buttons">
    <button id="scrollUp">Up</button>
    <button id="scrollDown">Down</button>
</div>

var container = $('#container');
var inc = 84;
$('#scrollUp').on('click',function(){
    container.scrollTop(container.scrollTop()-inc);
});        
$('#scrollDown').on('click',function(){
    container.scrollTop(container.scrollTop()+inc);
});