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

Question

我有一个固定大小和溢出的容器div:滚动,它填充了较小的divs列表.这是一个小提琴的例子:http://jsfiddle.net/etYSC/2/

我想要的是滚动从不切割一个盒子,总是显示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);   
});

http://jsfiddle.net/etYSC/7/

捕捉到最近的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);
});

http://jsfiddle.net/etYSC/8/

感谢所有的帮助,我迷失了如何接受这一点并在今天学到了很多东西.

Answer 1

不完美的解决方案.

但这样的事情应该有用(NB:需要改进)

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

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

});???

在这里小提琴http://jsfiddle.net/R7tAK/1/

更新

一些比上面更精细的代码,没有任何其他插件或库.(闪烁删除)

var scrollTimerHandle = "";

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

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

    clearInterval(scrollTimerHandle);

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

}, 1000);


});? 

在这里玩http://jsfiddle.net/R7tAK/4/