Прокручиваемый div застрял - PullRequest
Новая
       23

Прокручиваемый div застрял

0 голосов
/ 05 февраля 2019

Функция горизонтальной прокрутки работала нормально, пока я не установил несколько кнопок прокрутки.В консоли я увидел, что поле перемещается только в диапазоне 50 пикселей, но я не мог понять, откуда возникла проблема.Кроме того, кнопки не работают на Mozilla ..

Вот мое демо: jsFiddle 

var scrollableDiv= document.getElementsByClassName('scroll')[0],
    width = parseInt(scrollableDiv.offsetWidth, 10),
    cldWidth = parseInt(scrollableDiv.children[0].offsetWidth, 10),
    distance = cldWidth - width,
    speed = 50, 
    current = 0;

scrollableDiv.children[0].style.left = current + "px"; 
var scrollFunction = function (e) {

    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    if ((delta == -1 && current * speed >= -distance) || (delta == 1 && current * speed < 0)) {
        current = current + delta;
    }

    scrollableDiv.children[0].style.left = (current * speed) + 'px';

    e.preventDefault();

};

if (scrollableDiv.addEventListener) {
    scrollableDiv.addEventListener("mousewheel", scrollFunction, false);
    scrollableDiv.addEventListener("DOMMouseScroll", scrollFunction, false);
} else {
    scrollableDiv.attachEvent("onmousewheel", scrollFunction);
}


$('#right-button').click(function () {
    event.preventDefault();
    $('.gallery-scroll').animate({
        scrollLeft: "+=800px"
    }, 500);


    $('#left-button').click(function () {
        event.preventDefault();
        $('.gallery-scroll').animate({
            scrollLeft: "-=800px"
        }, 500);
    });
});
...