使用 jQuery 移动滚动条答案

【问题标题】：Move scrollbars with jQuery使用 jQuery 移动滚动条
【发布时间】：2019-05-02 03:02:50
【问题描述】：

我一直在用 jQuery 创建一个图片库，一切都完成了。图像水平并排放置在其溢出 id 隐藏的 div 中（我不想显示滚动条）。

我在链接中有两个图像向左和向右箭头。现在我想做的是，当我单击左箭头时，它应该显示上一个图像，当我单击右箭头图像时，它应该显示下一个图像。我怀疑当用 jQuery 单击相应的箭头图像时，我必须将滚动条朝正确的方向移动。

怎么做？

【问题讨论】：

标签： javascript jquery html image-gallery

【解决方案1】：

我相信你可以通过scrollLeft 做到这一点

$("#leftArrow").click(function(){
    $("#divId").scrollLeft(Math.max(0, $("#divId").scrollLeft() - 100));
});

$("#rightArrow").click(function(){
    $("#divId").scrollLeft(Math.min(1000, $("#divId").scrollLeft() + 100));
});

使用适当的限制而不是 0 和 1000，以及您的图像宽度而不是 100。

但是，查看您的示例页面，您遇到了另一个问题。

你认为你的图片是这样放置的：

[可视区域] [溢出....] .==========================._ ___ ___ ___ ___ X | | | | | | X | | | | . . . | | X___|___|___|___|___|___|_X_|___|___|___| |___| "==========================

并且水平滚动可见区域将使其他图像变得可见。

事实上，图像是这样放置的：

[可视区域] .===========================。 X | | | | | | X X___|___|___|___|___|___| X "========================== |___|___|___|___|___|___| | | | | | | | |___|___|___|___|___|___| [溢出...] ... ___ ___ ___ ___ ___ ___ | | | | | | | |___|___|___|___|___|___|

...所以水平滚动没有好处。（图像实际上是垂直溢出的！事实上，如果您使用相同的代码但使用scrollTop 而不是scrollLeft，您可以看到这一点）

图像是环绕的，因为它们位于具有明确宽度的 div 内。

您可以通过在第一个 div（带有 overflow:none 的那个）中放置第二个 div 来解决此问题，该 div 的宽度足以容纳您的所有图像。

按照你的页面，执行

javascript:
$("#images")
.css("overflow", "hidden")
.wrapInner("<div style='width:1000px'>");

会成功的。然后如果你执行

javascript:
$("#images").scrollLeft(10);

你会看到水平滚动确实有效。

【讨论】：

@Denial：我试过你的代码，但是当我点击箭头时它不会移动图像，请看这里：sarfraznawaz2005.kodingen.com/demos/jquery/image_gallery
@Sarfraz：我已经更新了帖子以解决您的实际问题。 scrollLeft 应该真的可以工作，一旦你解决了你的其他问题；我没有否认：]
感谢它现在滚动，我现在开始处理这个问题。谢谢:)

【解决方案2】：

如果你想做一个稍微性感一点的版本，你可以为可滚动区域设置动画。

$("#left").click(function(){
    $("#scroll-holder").animate({ scrollLeft: Math.max(0, $("#scroll-holder").scrollLeft() - 250)}, 175);
});
$("#right").click(function(){
    $("#scroll-holder").animate({ scrollLeft: Math.max(1000, $("#scroll-holder").scrollLeft() + 250)}, 175);
});

【讨论】：