JQuery順利滾動到DIV內部的位置，溢出隱藏

Question

我有一個div充滿內容（日期）。任何時候你都可以在屏幕上看到5個日期。我想讓div右邊的箭頭滾動顯示下一個5的div直到結束，反之亦然左邊的箭頭向左滾動5個日期直到到達結尾。

這是如何實現的。

一些信息::

• 每個日期是50像素寬，包括所有填充
• 有90至120日期
• 只有5可以一次看到。
• 日期已經作爲移動設備上的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的「左」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中：hidden set，然後將容器向上拉[x]像素作爲包裝的高度。

的HTML + CSS是：

> <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的將是這樣的：

> $("#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' 
    }); 
});