При помощи scrollLeft по нажатию на кнопку делаем отступ. Код выглядит так:
$("#scrollLeft").bind("click", function(event) {
event.preventDefault();
$("div").animate({
scrollLeft: "+=120px"
});
});
div {
white-space: nowrap;
width: 100px;
overflow: hidden;
}
Вопрос такой. Как сделать проверку наличия возможности прокрутки? То есть, если прокрутка дошла до конца, тогда добавить класс к кнопке.
Ответ
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; }
test text test text test text test text test text test text test text test text that's all
Комментариев нет:
Отправить комментарий