使用按钮左右滚动答案

【问题标题】：Right and Left Scrolling with Button使用按钮左右滚动
【发布时间】：2014-07-05 14:41:46
【问题描述】：

我有三个 div：左、中和右。 Middle 用于内容，而 left div 和 rightdiv 仅用于滚动中间 div 的按钮。中间 div 的内容将是图片列表。所以，如果用户想看到还隐藏在中间div右边的图片，可以点击右边的div向右滚动。

我希望我的问题能被理解。

此脚本不适用于我的 div。我认为这里的任何人都可以给我另一个可以控制这些 div 的脚本。

这里只是我不能使用的脚本

   $(document).ready(function () {
       $("#left").click(function () { 
       var leftPos = $('.DivDataMain').scrollLeft();
       $(".DivDataMain").animate({scrollLeft: leftPos + 250}, 600);
  });   

       $("#right").click(function () { 
       var leftPos2 = $('.DivDataMain').scrollLeft();
       $(".DivDataMain").animate({scrollLeft: leftPos2 - 250}, 600);
  });   
       });

小提琴：

Scroll Left to Right with Button

提前致谢

【问题讨论】：

你可以使用 scrollIntoView jquery 插件。然后而不是滚动中间的div。维护图像的行和列。假设您有一个包含列和行的图像表。假设有 10 列。计算所述列的宽度以确定哪些列在视图中。如果用户单击右键，它只是从第 11 列抓取图像并滚动到它的视图中，反之亦然。当您将图像滚动到视图中时，请跟踪最左边的列索引和最右边的列索引。
谢谢你的建议，伙计。一旦我发现它可能会更好，我会尝试一下。
实际上，如果您使用表格，将图像所在的列滚动到视图中可能会更好。然后你基于列而不是 x 图像中的 1 个。

标签： javascript jquery html css

【解决方案1】：

看起来您的脚本是准确的。我认为您遇到的问题有两个：

您必须在容器 div 上设置宽度
你在中间div的内容必须超过当前div的宽度，否则jQuery不会滚动它

Here's a DEMO

.DivDataMain {
    width:100%;
    overflow:hidden;
    display:block; 
    background:#000; 
    height:400px; 
    margin:auto;
    position: relative;
}

【讨论】：

请看我的演示......它基本上使用相同的 div。
您好，它有效，但仅适用于左侧，不适用于右侧。右键有什么问题？
什么都没有。没有需要滚动的内容。先向左滚动，然后再向右滚动。如果没有任何隐藏内容可供查看，则它无法向某个方向滚动。
感谢您的帮助。 :)
如何设置限制我的内容的滑块，如果从要滑动的一侧没有内容可显示，滑块将停止滑动div？

【解决方案2】：

您可以浮动并使用绝对布局将右列固定到右侧。

让浏览器原生地从右向左滚动。只需将外部内容的边距填充到与右列 div 相同的宽度，与右 div 相同的宽度。这样，当他们一直向右滚动时，右侧的 div 就不会隐藏剩余的内容。

【讨论】：

我希望它是交互式的。中间 div 的内容将是图片列表。
你能发布一个你的 div 和他们使用的 css 的例子吗？

【解决方案3】：

正如 John 所说，脚本很好...您可以考虑使用 slide in whole 's 而不是将 div 设置为 250px 的动画...这会限制您以后选择图片...试试这个https://github.com/eamonnkillian/Slide-in-Frames

【讨论】：

您好，感谢您的链接，但我可以通过链接预览它的演示吗？您必须看看它是如何工作的？
快速AWS机器看看...ec2-54-186-182-242.us-west-2.compute.amazonaws.com/…
基于约翰的小提琴演示，如何设置限制我的图片的滑块，如你所建议的......