Question

我有一个满满的内容（日期）。在任何时候你都可以在屏幕上看到5个日期。我希望div右侧的箭头滚动显示下一个5的div直到结束，反之亦然左边的箭头向左滚动5个日期，直到它结束。

如何实现这一目标。

一些信息::

每个日期的宽度为50px，包括所有填充
有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 Scrollable滚动它来实现这个目的：http://flowplayer.org/tools/scrollable/index.html

（只需正确排列并滚动<ul>代替<div>代替

但最好还是要了解你如何做这样的事情。

执行此类操作的方法是将日期容器包装在具有overflow：hidden set的DIV中，然后将容器向上拉[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

在Jose 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'
    });
});

JQuery平滑滚动到DIV内的位置，隐藏溢出

4 个答案: