主页 / 问题 / 772620
Accepted
Alexey Giryayev
Asked:2020-01-19 02:52:42 +0000 UTC2020-01-19 02:52:42 +0000 UTC

检查 scrollLeft 是否可滚动

  • 772

scrollLeft在按下按钮的帮助下，我们缩进。代码如下所示：

$("#scrollLeft").bind("click", function(event) {
  event.preventDefault();
  $("div").animate({
    scrollLeft: "+=120px"
  });
});
div {
  white-space: nowrap;
  width: 100px;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  test text test text test text test text test text test text test text test text
</div>
<button id="scrollLeft">click</button>

问题是。如何检查是否可以滚动？也就是说，如果滚动已到尽头，则为按钮添加一个类。

javascript

1 个回答

  1. Best Answer

    var step = 120,
  btns = $(".btns"),
  el = $("#div");

btns.bind("click", function(event) {
  let ths = $(this),
    direction = ths.data('direction'),
    expect = el.scrollLeft() + (step * direction);
  el.animate({
    scrollLeft: "+=" + (step * direction) + "px"
  }, function() {   
    btns.removeClass('buy-buy');
    if (expect != el.scrollLeft() || expect == 0) {
      ths.addClass('buy-buy');
    };
  });
});
    #div {
  white-space: nowrap;
  width: 100px;
  overflow: hidden;
}

.buy-buy {
  pointer-events: none;
  color: lightgray;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">
  <p>test text test text test text test text test text test text test text test text that's all</p>
</div>
<button class="btns buy-buy" id="scrollRight" data-direction="-1">bck</button>
<button class="btns" id="scrollLeft" data-direction="1">fwd</button>

    • 1

相关问题