10

我有一个固定的 div 大小宽度。我将其表示为 x

我有一个固定的 div 大小高度。

我想在 div 的任一侧添加按钮，允许用户向右导航，即向右移动 x 像素量，即显示 div 中的下一个条目。

任何人都可以提出解决这个问题的方法吗？

这是我当前的 html / css：

<div class="outer_container" style="overflow: scroll; overflow-y: hidden; width:577px; border-style:solid; border-width:5px; border-color:#578278;">
    <div class="inner_container" style="width: 10000px;">

<table>
    <tr>
        <td style=" width: 577px; ">
            <div style="text-align:left;  margin: 0px 10px 10px 10px; width:557px; ">
                <p>Add Comment to the Tesco Catalogue</p>
                <form class="comment_form" action="profile" method="post">
                    <textarea style="resize:none;" maxlength="250" rows="2" cols="65" placeholder="Enter your comment here..."></textarea>
                    <input type="submit" value="Submit"/>
                </form>
            </div>
        </td>
        <!-- do a for loop here to generate all other items -->
        <td style="width:577px;">
            <div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;">
                <p class="comment_username"> User said at such a time</p>
                <p class="comment_comment"> Comment ......</p>
            </div>
        </td>
        <td style="width:577px;">
            <div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;">
                <p class="comment_username"> User said at such a time</p>
                <p class="comment_comment"> Comment ......</p>
            </div>
        </td>
    </tr>
</table>
</div>
</div>

这是jsfiddle

所以我想在 div 的任一侧添加两个按钮，这两个按钮都向左或向右移动 x 个像素，显然是向左按钮，例如上一条评论，右按钮，下一条评论。

因此，在我创建的 html 中，我希望滚动条一次向左或向右移动 577px，具体取决于用户单击。

让我知道你们的想法！

4

2 回答 2

21

您可以使用scrollLeft()来检索当前滚动位置。然后使用 jQuery 的animate函数来平滑地向左/向右滚动容器。为此，我添加了两个 ID 为左/右的按钮。函数之间的唯一区别是一个增加了 200 的距离，而另一个减去了 200。用 200 替换您想要的任何滚动量。对于奖励积分，您可以检测下一个评论部分相对于 div 容器的左侧位置，并即时计算两百个值。

http://jsfiddle.net/EB4UC/70/

$('#left').click(function () {
    var leftPos = $('div.outer_container').scrollLeft();
    console.log(leftPos);    
    $("div.outer_container").animate({
        scrollLeft: leftPos - 200
    }, 800);
});

$('#right').click(function () {
    var leftPos = $('div.outer_container').scrollLeft();
    console.log(leftPos); 
    $("div.outer_container").animate({
        scrollLeft: leftPos + 200
    }, 800);
});
于 2013-01-24T03:22:54.350 回答
2

你在寻找，

$('.outer_container').scrollLeft(3);
$('.outer_container').scrollTop(16);

因此，当您添加按钮时，代码将是

$('#buttonid').click(function(){
$('.outer_container').scrollLeft(5);
})

让用户点击多次，看看会发生什么

$('#button_id').click(function(){
    var scroll = $('.outer_container').scrollLeft();
    console.log(scroll);
$('.outer_container').scrollLeft(5+scroll);
})
于 2013-01-24T03:20:26.067 回答