Question

我有一个固定的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，具体取决于用户点击。

让我知道你的想法！

Answer 1

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

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);
});

Answer 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);
})

将滚动条位置移动x个像素数

2 个答案: