Плавная прокрутка без привязки только jQuery

У меня есть сценарий jQuery, который позволяет мне прокручивать по горизонтали, но это старый ржавый свиток, и я хочу сделать его плавным, не меняя весь код.

Я хочу заменить this.scrollLeft -= (delta * 90); на .animate, но я новичок в jQuery.

Вот мой код до сих пор:

$(document).ready(function() {

    $('html, body, eall, *').mousewheel(function(e, delta) {
        this.scrollLeft -= (delta * 90);
        e.preventDefault();
    });
});

javascript jquery smooth-scrolling
person Alex Bonta    schedule 23.09.2013    source источник
comment
Что должен выбрать 'eall'?   -  person Bigood    schedule 23.09.2013
comment
и тогда еще зачем использовать '*', который все равно будет соответствовать всем элементам?   -  person A. Wolff    schedule 23.09.2013

Ответы (2)


arrow_upward
1
arrow_downward

Сначала выберите только те элементы, которые должны вызывать обратный вызов вашего события, а не $('html, body, eall, *'), как показано в вашем вопросе.

Например, добавить класс .horizontalScroll к нужным элементам, а затем $('.horizontalScroll)

Затем вы можете сделать что-то вроде этого, чтобы сделать прокрутку более плавной:

var scroll = $(this).scrollLeft() - (delta * 90);
$(this).stop(true).animate({
      scrollLeft: scroll
}, 200);
e.preventDefault();

Посмотрите эту рабочую демонстрацию (прокрутите внутри div#scroll, настройте (delta * 90) и animate аргумент длительности 200 чтобы получить желаемую гладкость.

person letiagoalves    schedule 23.09.2013
comment
Спасибо, это сработало, но мне нужно кое-что изменить в вашем коде $(this).stop(true) вместо $(this).stop(true, true) Ty - person Alex Bonta; 23.09.2013
comment
@AlexBonta ты молодец. прыжки в конец вызывают уродливое поведение. Я обновил ответ и ДЕМО - person letiagoalves; 23.09.2013

arrow_upward
2
arrow_downward

Вы можете сделать что-то вроде этого:

$('html, body').animate({
    scrollLeft : 0 // or whatever value you need here
}, 750);
person CunningFatalist    schedule 23.09.2013