Как сделать список прокрутки вручную с помощью jquery? - PullRequest
Новая
       15

Как сделать список прокрутки вручную с помощью jquery?

0 голосов
/ 04 марта 2019

Я хочу вручную прокрутить список 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, чтобы заставить его работать.я хочу сделать это точно так же, как я показываю внизу списка прокрутки, чтобы перейти к следующему пункту.

1 Ответ

0 голосов
/ 04 марта 2019

Вы можете использовать метод 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>
...