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

Posted 2023-04-13

【中文标题】将滚动条位置移动 x 个像素

【英文标题】：Move scrollbar position by x amount of pixels

【发布时间】：2013-01-07 17:38:14

【问题描述】：

我有一个固定的 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 中，我希望滚动条一次向左或向右移动 577 像素，具体取决于用户点击。

让我知道你们的想法！

【参考方案1】：

您可以使用scrollLeft() 检索当前滚动位置。然后使用 jQuery 的animate 函数来平滑地左右滚动容器。为此，我添加了两个 ID 为左/右的按钮。函数之间的唯一区别是一个增加了 200 的距离，而另一个减去了 200。用 200 替换您想要的任何滚动量。对于奖励积分，您可以检测下一个 cmets 部分相对于 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);
);

【讨论】：

太棒了，正是我想要的！声誉++，我会尽可能地把这个作为答案，谢谢！

【参考方案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);
)