Question

我有一个水平div，我试图根据点击时的id滚动到不同的元素。

以下是我尝试过的两个主要功能：

function scroll1() {
/*   Attempt 1 */
    $('#scroll-post-1').scrollTo('#2')
}

function scroll2() {
/*  Attempt2 */
  $('#scroll-post-1').stop().animate({
    scrollLeft: $('#3').offset().left
  }, 500);
  event.preventDefault();
}

请参阅此处的第二次尝试：

function scroll1() {
 $('#scroll-post-1').stop().animate({
  scrollLeft: $('#2').offset().left
 }, 500);
 event.preventDefault();
}

function scroll2() {
 $('#scroll-post-1').stop().animate({
  scrollLeft: $('#3').offset().left
 }, 500);
 event.preventDefault();
}

function scroll3() {
 $('#scroll-post-1').stop().animate({
  scrollLeft: $('#4').offset().left
 }, 500);
 event.preventDefault();
}

.scroll-post {
  height: auto;
  background-color: grey;
  position: relative;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}

.mydiv {
  position: relative;
  font-size: 5em;
  width: auto;
  background-color: red;
  display: inline-block;
  padding: 2%;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
  </head>

  <body>

    <div class="scroll-post" id="scroll-post-1">
      <div class="mydiv" id="1" onclick="scroll1();">Start Here</div>
      <div class="mydiv" id="2" onclick="scroll2();">Scroll Here</div>
      <div class="mydiv" id="3" onclick="scroll3();">Then Here</div>
      <div class="mydiv" id="4">Finally Here</div>
    </div>

  </body>

</html>

我没试过$(container).scrollTo(target)方法。它适用于第一个元素，但不适用于任何后续元素。

Answer 1

问题是jQuery跟踪的.left偏移量是相对于容器的，所以当元素移动时它会降级。

更好的方法是为元素offsetLeft^MDN使用本机JavaScript属性。

例如：

scrollLeft: $('#3')[0].offsetLeft

使用offsetLeft完整演示您的代码：https://jsfiddle.net/5umvne08/

平滑滚动到水平div中的多个元素

1 个答案: