オーバーフローを隠してDIV内の位置にJQueryスムーススクロール

Question

コンテンツ（日付）がいっぱいのdivがあります。誰でもあなたは画面上で5つの日付を見ることができます。 divの右側にある矢印はdivをスクロールし、次の5を最後まで表示し、その逆を左にスクロールして5つの日付だけ最後に到達するまで表示します。

これはどのように達成できますか。

一部の情報::

• 各日付は、90〜120の日付のみ5を一度に見ることができます
• がありますが、広いすべてのパディング
• 含めては50pxです。
• 日付は、モバイルデバイス上のWebkitシステムの一部として既にスクロールしています。

マーヴェラス

Answer 1

var offset = 0; // current scrolling "amount" 
$('#right-arrow').click(function() { 
    offset += (50 * 5); // add a total width of 5 items to the scrolling amount 

    if (offset > (number_of_dates * 50)) { 
     offset = number_of_dates * 50; // don't exceed this limit 
    } 

    $('#div-to-scroll').animate({ 
     'margin-left': '-' + offset + 'px' 
    }); 
}); 


$('#left-arrow').click(function() { 
    offset -= (50 * 5); 

    if (offset < 0) { 
     offset = 0; // don't exceed this limit 
    } 

    $('#div-to-scroll').animate({ 
     'margin-left': offset + 'px' 
    }); 
}); 

Answer 2

ここでマークアップとCSSについて話していますか？ jQueryのものはかなり簡単なので。

最も外側には、ラッパーdivが必要です。これにはoverflow: hidden;と固定幅/自動幅が必要です。その中に日付を含むdivを配置すると、すべての日付に合わせて固定幅である必要がありますが、非常に大きくなります。それにはposition: relative;が必要です。日付はfloat: left;を使用して調整する必要があります。その後、jQueryは日付divの "left" CSSプロパティをアニメーション化できます。例えば。誰かが右矢印をクリックした場合、$('#dates').css('left', $('dates').position().left - 50 + 'px');。 jQuery animateまたはCSS3 transitionsを使用して変更をアニメートすることもできます。

Answer 3

基本的には、各「ページ」（5アイテム）をラップし、これを達成するためにjQueryToolsスクロールでそれをスクロールすることができます：http://flowplayer.org/tools/scrollable/index.html

（ちょうどそれを適切に配置し、<ul>年代の代わり<div> "のためのスクロールその事柄）

しかし、あなたが一般的にそのようにする方法を理解する方が良いです。

このようなことをする方法は、オーバーフロー：隠しセットを持つDIVの内部に日付コンテナをラップしてから、コンテナをラッパーの高さとして[x]ピクセル上に引き上げることです。

> <div class="wrapper" style="overflow:hidden; height:250px;"> // height is 5 x 50px per li for this purpose 
> <ul class="datesContainer" style="position:relative;"> 
> <li> some date </li> 
> <li> another date </li> 
> ... 
> </ul> 
> </div> 
> <a id="goUp">Go Up</a> 

とjQueryはこのようなものになるだろう：

HTML + CSSは次のようになり、私はこの例では、一定の数値を使用しました

> $("#goUp").click(function(){ 
      newOffset = parseInt($(this).css("top"))-250 
      $(".datesContainer").animate("top",newOffset,500); 
    } 

、基本的には「$を（取得します.wrapper "）。height（）を使って任意の高さで動作させることができます。 また、ユーザーがリストの一番下に来たときにそれを処理する必要があります。

希望すると便利です。

Answer 4

ホセFaetiの答えのビル、私は（元の質問は、水平のためだったが、これは同じ基本的な戦略の別の角度である）のロジックを少し変更し、それ縦スクロールの代わりに、水平作った：

HTML ：

<div id="up-arrow">UP</div> 
<div id="rows-wrapper"> 
    <div id="rows-container"> 
    <div class="row-item">Row Item 1</div> 
    <div class="row-item">Row Item 2</div> 
    <div class="row-item">Row Item 3</div> 
    <div class="row-item">Row Item 4</div> 
    <div class="row-item">Row Item 5</div> 
    <div class="row-item">Row Item 6</div> 
    <div class="row-item">Row Item 7</div> 
    <div class="row-item">Row Item 8</div> 
    <div class="row-item">Row Item 9</div> 
    <div class="row-item">Row Item 10</div> 
    </div> 
</div> 
<div id="down-arrow">DOWN</div> 

CSS（あなたは空白を埋めるために必要がありますが、オーバーフローが行くべきところ、これが表示されます）：

#product-card-wrapper { 
    height: 250px; 
    overflow: hidden; 
} 
.row-item { 
    float:left; 
} 

JS：

var offset = 0; // current scrolling "amount" 
var row_height = $('.row-item').height() + 10; //calc height of item in row and compensate for some bottom margin 
var number_of_rows = Math.ceil(($('.row-item').length/2) * 10)/10; //calc number of rows and round up (dividing by 2 as there are 2 items per row) 
$('#down-arrow').click(function() { 
    if ((Math.abs(offset)) > (number_of_rows * row_height)-row_height) { 
     // don't exceed this limit 
    } else { 
     offset -= (row_height); 
    $('#rows-container').animate({ 
     'margin-top': offset + 'px' 
    }); 
    } 
}); 

$('#up-arrow').click(function() { 
    offset += (row_height); 
    if (offset > 0) { 
    offset = 0; // don't exceed this limit 
    } 

    $('#rows-container').animate({ 
     'margin-top': offset + 'px' 
    }); 
});