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

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 に答える