Question

我有三个div：左，中，右。中间是内容，而左侧div和右侧仅用于滚动中间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);
  });   
       });

的 FIDDLE：

Scroll Left to Right with Button

先谢谢

Answer 1

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

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

Answer 2

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

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

Here's a DEMO

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

Answer 3

正如约翰所说，脚本很好......你可以考虑使用整体幻灯片而不是将div设置为动画250px ...这限制了你以后对图片的选择...试试这个https://github.com/eamonnkillian/Slide-in-Frames

使用按钮向右和向左滚动

3 个答案: