How to make manually scroll list using jquery?

问题: I want to manually scroll a UL list with two button. First time 4 items will show and when user click on up or down button list will scroll 1 item a time. $(docu...

问题:

I want to manually scroll a UL list with two button. First time 4 items will show and when user click on up or down button list will scroll 1 item a time.

$(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>

Now i am stuck i don't how i can dynamically pass the next and previous li to make it work . i want to do it exactly like that as i show in down button list scroll to next item.


回答1:

You can use scrollIntoView() method to scrolls the element into the visible area. Note that :not(:nth-last-child(3)) would be the n - 1 visible list.

$(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>

  • 发表于 2019-03-05 00:57
  • 阅读 ( 198 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除