10

我有一个固定大小和溢出的容器 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/

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

4

4 回答 4

6

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

但是这样的事情应该可以工作（注意：需要改进）

​$("#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-10T13:50:50.473 回答
4

您可能必须移除滚动条并使用 Carousel，因为您使用的是 jQuery，您可以使用jCarousel插件。这是使用垂直轮播的示例

于 2012-08-10T13:35:40.390 回答
2

这是一个用一些滚动按钮替换滚动条的选项。我通过设置删除了滚动overflow:hidden;条#container

HTML

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

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 演示

于 2012-08-10T14:02:05.167 回答
0

如果我理解正确，您可以尝试此代码：

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

http://jsfiddle.net/nnwsx/

于 2012-08-10T13:43:18.637 回答