jQuery 按 x 像素量移动滚动条位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14493311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Move scrollbar position by x amount of pixels
提问by cwiggo
I have a fixed div size width. i'll denote this as x
我有一个固定的 div 大小宽度。我将其表示为 x
I have a fixed div size height.
我有一个固定的 div 大小高度。
I want to add buttons to either side of the div allowing the user to navigate right i.e. moving x amount of pixels to the right, i.e. showing the next entry in the div.
我想在 div 的任一侧添加按钮，允许用户向右导航，即向右移动 x 像素量，即显示 div 中的下一个条目。
Can anyone suggest a solution to this problem?
任何人都可以提出解决这个问题的方法吗？
Here is my current html / css:
这是我当前的 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>
Here is the jsfiddle
这是jsfiddle
So I want to add two buttons one either side of the div, both of which move x pixels, left or right, obviously left button left e.g. previous comment , right button right, next comment.
所以我想在 div 的任一侧添加两个按钮，这两个按钮向左或向右移动 x 像素，显然向左按钮向左例如上一条评论，向右按钮向右，下一条评论。
So in the html i've created I want the scroll bar to either move left or right 577px at a time, depending on the user click.
所以在我创建的 html 中，我希望滚动条一次向左或向右移动 577px，具体取决于用户点击。
Let me know what you think guys!
让我知道你的想法伙计们！
回答by mrtsherman
You can use scrollLeft()to retrieve the current scroll position. Then use jQuery's animatefunction to smoothly scroll the container left/right. I added two buttons with ids of left/right for this. The only difference between the functions is that one adds a distance of 200 whereas the other subtracts 200. Substitute 200 for whatever scroll amount you want. For bonus points you could detect the left position of the next comments section relative to the div container and calculate the two hundred value on the fly.
您可以使用scrollLeft()来检索当前滚动位置。然后使用 jQuery 的animate功能平滑地向左/向右滚动容器。为此，我添加了两个带有左/右 ID 的按钮。函数之间的唯一区别是，一个增加 200 的距离，而另一个减少 200。用 200 替换您想要的任何滚动量。对于奖励积分，您可以检测下一个评论部分相对于 div 容器的左侧位置，并即时计算 200 值。
$('#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);
});
回答by Hussein Nazzal
are you looking for ,
你在找吗，
$('.outer_container').scrollLeft(3);
$('.outer_container').scrollTop(16);
so when you add the button the code will be
所以当你添加按钮时，代码将是
$('#buttonid').click(function(){
$('.outer_container').scrollLeft(5);
})
to make the user click as many times and see what happens
让用户点击尽可能多的次数，看看会发生什么
$('#button_id').click(function(){
var scroll = $('.outer_container').scrollLeft();
console.log(scroll);
$('.outer_container').scrollLeft(5+scroll);
})
