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

我有一个固定大小和溢出的容器div：滚动，它充满了更小的div制作某种列表。这里是一个小提琴的例子：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/

感谢所有的帮助，我对如何解决这个问题感到迷茫，今天学到了很多东西。

来源

2012-08-10 petervaz

这是一个艰难的，因为如果我没有记错的话，你只检查删除滚动条滚动发生后滚动位置*。这意味着，如果您强制滚动以增量（在这种情况下为块的高度），则当容器滚动几个像素时会出现很多口吃，然后跳回或前进。您可以完全移除滚动条，并提供您自己的按钮，以期望的增量滚动容器。 – jackwanders 2012-08-10 13:54:38

@kiranvj得到了我的最终形式，当我问我的时候不是我想象的那样，但我更喜欢这个。谢谢你的帮助。 – petervaz 2012-08-10 19:06:20

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

但是这样的事情应该工作（注：需要完善）这里

$("#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/

来源

2012-08-10 13:50:50 kiranvj

这就像一个魅力，我很确定它会适合我的代码。感谢您的帮助。 – petervaz 2012-08-10 13:58:46

正如我在上面的评论中提到的，我在滚动中看到很多抖动。 – jackwanders 2012-08-10 14:00:06

正如答案中所提到的是非常基本的原始代码，需要细化更多并可能添加一些周围的逻辑。或者您需要添加自定义滚动并使用一些类似的逻辑 – kiranvj 2012-08-10 14:03:12

您可能将不得不移除滚动条并使用Carousel，因为您使用的是jQuery，因此您可以使用jCarousel插件。下面是一个使用vertical carousel

来源

2012-08-10 13:35:40 JaredMcAteer

感谢您的支持者，但是将此传送带添加到它并且看起来不太正确的需求太简单了。不过，这是一个不错的插件。 – petervaz 2012-08-10 13:55:23

旋转木马的外观完全取决于你的设计风格，这个例子并不是它唯一的样子。 – JaredMcAteer 2012-08-10 13:57:04

如果我理解你的权利你可以试试这个代码的例子：

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

http://jsfiddle.net/nnwsx/

来源

2012-08-10 13:43:18 LLAlive

这不起作用;它所做的只是防止用户在页面上滚动超过10个像素。 – jackwanders 2012-08-10 13:47:59

这并不完全正确。但是您可以使用scrollTop（x）向下滚动固定位置。 – LLAlive 2012-08-10 13:48:19

下面是一些滚动按钮取代了滚动条的选项。我通过对#container

HTML

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

设置overflow:hidden;的Javascript

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

jsFidle DEMO

来源

2012-08-10 14:02:05 jackwanders

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

回答

相关问题