Question

我有这样的代码：

<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)
    })

不幸的是，它根本不起作用。我该怎么办？

Answer 1

1 scrollRight不存在。必须执行带有负数的scrollLeft以“向右滚动”

2 jqelem.scrollLeft(position) - ＆gt;经过多次调用后，您可能想知道为什么它不会再次滚动。那是因为它滚动到那个位置，它不会将滚动增加到偏移量。因此jqelem.scrollLeft(jqelem.scrollLeft() + offset)是您希望根据当前滚动值继续滚动的内容。

以下是基于您发布的代码的工作示例：

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

HTML CODE：

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

JS CODE：

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);
})

CSS代码：

.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;
}

使用jQuery在div中滚动

1 个答案: