如何使用 jquery 手动滚动列表？

Question

我想用两个按钮手动滚动一个 UL 列表。 第一次将显示 4 个项目，当用户单击向上或向下按钮列表时，将一次滚动 1 个项目。

$(document).ready(function() {
  $(".down").on("click", function() {
    $(".scroll").scrollTop(
      $(".listitem:nth-child(4)").offset().top -
        $(".listitem:nth-child(3)").offset().top
    );
  });
});

.scroll {
  height: 100px;
  width: 200px;
  overflow-y: hidden;
  overflow-x: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container"><div class="row">
  <div class="col-md-12">
    <ul class="scroll">
      <li class="listitem">List Item 1</li>
      <li class="listitem">List Item 2</li>
      <li class="listitem">List Item 3</li>
      <li class="listitem">List Item 4</li>
      <li class="listitem">List Item 5</li>
      <li class="listitem">List Item 6</li>
      <li class="listitem">List Item 7</li>
      <li class="listitem">List Item 8</li>
    </ul>
    <button class="btn up">Up</button>
     <button class="btn down">Down</button>
  </div></div>

现在我被困住了，我不知道如何动态传递下一个和上一个 li 以使其工作。我想这样做，就像我在向下按钮列表中显示的那样滚动到下一个项目。

Answer 1

您可以使用scrollIntoView() 方法将元素滚动到可见区域。请注意，:not(:nth-last-child(3)) 将是 n - 1 可见列表。

$(document).ready(function() {
  $(".down").on("click", function() {
    var $active = $(".listitem.active");
    var $target = $active.next();
    if ($target.get(0) && $target.is(':not(:nth-last-child(3))')) {
      $active.removeClass('active');
      $target.addClass('active').get(0).scrollIntoView({
        behavior: 'instant',
        block: 'start',
        inline: 'nearest',
      });
    }
  });

  $(".up").on("click", function() {
    var $active = $(".listitem.active");
    var $target = $active.prev();
    if ($target.get(0)) {
      $active.removeClass('active');
      $target.addClass('active').get(0).scrollIntoView({
        behavior: 'instant',
        block: 'start',
        inline: 'nearest',
      });
    }
  });
});

.scroll {
  height: 100px;
  width: 200px;
  overflow-y: hidden;
  overflow-x: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <ul class="scroll">
        <li class="listitem active">List Item 1</li>
        <li class="listitem">List Item 2</li>
        <li class="listitem">List Item 3</li>
        <li class="listitem">List Item 4</li>
        <li class="listitem">List Item 5</li>
        <li class="listitem">List Item 6</li>
        <li class="listitem">List Item 7</li>
        <li class="listitem">List Item 8</li>
      </ul>
      <button class="btn up">Up</button>
      <button class="btn down">Down</button>
    </div>
  </div>
</div>