1

我有这样的代码：

<div id="#wrap">
  <div class="overview">
    <div class="cnt">[...content...]</div>
  </div>
</div>

两者.overview的.cnt宽度都设置为大约 10000px（通过 JS），而 '#wrap' 设置为100%. 我设置overflow-x: hidden了它们，所以滚动条被隐藏了。但我想向左或向右滚动这些 div。所以我创建了两个span元素和一些 jQuery：

    var selec = $('.overview');

    $('span.largeNext').on('click', function() {
        selec.scrollLeft(100)
    })

    $('span.largePrev').on('click', function() {
        selec.scrollRight(200)
    })

不幸的是，它根本不起作用。我能做些什么？

4

1 回答 1

0

1 scrollRight不存在。scrollLeft必须使用负数才能“向右滚动”

2 jqelem.scrollLeft(position) --> 多次调用此函数后，您可能想知道为什么它不会再次滚动。那是因为它滚动到那个位置，它不会将滚动增加到偏移量。jqelem.scrollLeft(jqelem.scrollLeft() + offset)您想让它根据当前滚动值继续滚动也是如此。

这是一个基于您发布的代码的工作示例：

JSFIDDLE：http: //jsfiddle.net/6dsTU/

HTML 代码：

<div id="wrap">
  <div class="overview">
      <span class="largeNext"></span><span class="largePrev"></span>
      <div class="cnt">LOOLOLOOLOLOOLOLOOLOLOOLOLOOLOLOOLOLOOLOLOOLOLOOLOLOOLOLOOLOLOOLOLOOLOLOOLOLOOLOLOOLOLOOLOLOOLOLOOLOLOOLOLOLOLOLOLOLOLOLOLOLLLOLLLOLOLOLOLOLLOLLOLOLOLO</div>
  </div>
</div>

JS代码：

var selec = $('.cnt');

$('span.largeNext').on('click', function() {
    var currscrl = selec.scrollLeft();
    selec.scrollLeft(currscrl + 200);
})

$('span.largePrev').on('click', function() {
    var currscrl = selec.scrollLeft();
    selec.scrollLeft(currscrl - 200);
})

代码：

.cnt
{

    overflow:hidden;

}
.wrap
{
   width: 10000px; 

}

.largeNext
{
   left:50px;
    top:50px;
    width: 50px;
   height: 50px;
   position:absolute;
   border: 1px solid black;
}

.largePrev
{
   left:0px;
    top:50px;
   width: 50px;
   height: 50px;
   position:absolute;
   border: 1px solid blue;
}
于 2013-08-13T11:05:04.483 回答