如何讓滾動條僅以固定間隔滾動？

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

如何讓滾動條僅以固定間隔滾動？

回答

相關問題