3

При помощи 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>

Вопрос такой. Как сделать проверку наличия возможности прокрутки? То есть, если прокрутка дошла до конца, тогда добавить класс к кнопке.

1 ответ 1

1

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>

3
  • Выглядит интересно. И в целом работает как надо. А если предположить, что есть 2 кнопки двигающие блок влево и вправо. Понятно, что они будут идентичными с разницей в один символ. Вопрос следующий, можно ли максимально сократить образовавшийся код совместив 2 функции смещения влево и вправо с добавлением класса при окончании прокрутки? 18 янв 2018 в 20:38
  • @Alexey Giryayev в ответе.
    – Kirill
    18 янв 2018 в 21:29
  • Вот это супер, спасибо огромное. 18 янв 2018 в 21:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.