Làm thế nào tôi có thể làm cho một thanh cuộn chỉ cuộn trong khoảng thời gian cố định?

Question

Tôi có div vùng chứa có kích thước cố định và tràn: cuộn, nó được lấp đầy với các div nhỏ hơn tạo ra một loại danh sách. Dưới đây là ví dụ về fiddle: http://jsfiddle.net/etYSC/2/

điều tôi muốn là cuộn không bao giờ cắt hộp, luôn hiển thị 3 hộp đầy đủ (trong ví dụ này), vì vậy nó sẽ luôn cuộn số lượng pixel cố định.

Làm cách nào để thực hiện việc này?

Tôi đang sử dụng thư viện jquery.

Google đã là một tình nhân khắc nghiệt về câu hỏi này vì các từ khóa gây hiểu lầm.

- giải pháp

tôi đã có thể tinh chỉnh đang kiranvj hơn một chút và tôi rất hài lòng với kết quả cuối cùng.

snapping div trước:

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/

chụp để div gần

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/

Cảm ơn tất cả sự giúp đỡ, tôi đã mất đi cách làm thế nào để thực hiện điều này và học được một thỏa thuận tốt ngày hôm nay.

Answer 1

Không phải là một giải pháp hoàn hảo.

Nhưng một cái gì đó như thế này nên làm việc (NB: cần phải tinh chỉnh)

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

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

});​​​ 

Fiddle đây http://jsfiddle.net/R7tAK/1/

Cập nhật

Một số những gì tinh chế mã hơn ở trên, mà không cần bất kỳ plugin khác hoặc libs. (Nhấp nháy loại bỏ)

var scrollTimerHandle = ""; 

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

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

    clearInterval(scrollTimerHandle); 

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

}, 1000); 


});​ 

Chơi ở đây http://jsfiddle.net/R7tAK/4/

Answer 2

Có thể bạn sẽ phải xóa thanh cuộn và sử dụng băng chuyền vì bạn đang sử dụng jQuery, bạn có thể sử dụng plugin jCarousel. Dưới đây là một ví dụ sử dụng một vertical carousel

Answer 3

Bạn có thể thử mã này nếu tôi hiểu bạn phải:

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

http://jsfiddle.net/nnwsx/

Answer 4

Dưới đây là một lựa chọn thay thế các thanh cuộn với một số nút cuộn.Tôi đã gỡ bỏ thanh cuộn bằng cách thiết lập overflow:hidden; trên #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 DEMO