Как сделать прокрутку элемента при прокрутке тела

Когда колесико мыши прокручивается в теле страницы, это событие может быть зафиксировано. Я бы хотел, чтобы это событие вызывало прокрутку целевого элемента.

#target — это прокручиваемый элемент, который никогда не достигает высоты страницы. Я хотел бы зафиксировать событие mousescroll в любом месте страницы, поэтому, даже если курсор не находится над элементом, элемент все равно прокручивается.

$( 'body' ).on( 'DOMMouseScroll mousewheel', function () {
    // Scroll #target instead of body    
});

Спасибо этому сообщению за то, что он показал мне, как захватывать события колеса прокрутки: Захват событий колеса прокрутки


javascript scroll jquery user-experience
person Laurence Lord    schedule 20.03.2014    source источник
comment
возможный дубликат Как для прокрутки в скрытом div переполнения к определенному в настоящее время невидимому элементу?   -  person Liam    schedule 20.03.2014
comment
Или, может быть, Как перейти к элементу внутри div?   -  person Liam    schedule 20.03.2014
comment
Это ужасная идея. Я хочу прокручивать страницу колесиком мыши, а вы мне это мешаете.   -  person Huangism    schedule 20.03.2014
comment
Спасибо @Лиам. Я думаю, что это отличается от других, потому что я хочу, чтобы прокрутка происходила, когда пользователь прокручивает колесо мыши. Вместо прокрутки к определенному элементу, как в других.   -  person Laurence Lord    schedule 20.03.2014
comment
@хуангизм . Нет-нет, я не хочу мешать пользователю использовать колесико мыши. Я хочу, чтобы они использовали колесо мыши, независимо от того, находятся ли они над целевым элементом или над любой частью страницы. Вот скрипт: jsfiddle.net/LL782/ZtGva/1   -  person Laurence Lord    schedule 20.03.2014
comment
@LaurenceLord я хотел прокручивать страницу с помощью колеса, а не прокручивать определенный элемент, когда я наводил курсор на страницу. Вы в основном блокируете пользователя для прокрутки страницы с помощью колесика мыши.   -  person Huangism    schedule 20.03.2014
comment
@Huangism Я понимаю вашу точку зрения, но на конкретной странице больше нечего прокручивать. Единственный элемент на странице, который нужно прокручивать, — это #target.   -  person Laurence Lord    schedule 20.03.2014
comment
@LaurenceLord Я отправил ответ, в скрипке все работает, я тестировал только в FF на Mac. Вы можете увеличить скорость прокрутки, если установите +/- более 5   -  person Huangism    schedule 20.03.2014
comment
@Huangism Это здорово. Работает на меня! Большое спасибо.   -  person Laurence Lord    schedule 21.03.2014

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете взглянуть на это.

http://jsfiddle.net/ZtGva/7/

JS

$(function () {
    var myCounter = 0,
        myOtherCounter = 0;
    var scroll = 0;

    $("#target").scroll(function () {
        myCounter = myCounter + 1;
        $("#log").html("<div>Handler for .scroll() called " + myCounter + " times.</div>");
    });

    //Firefox
    // $(document).bind(...) this works as well
    $('#body').bind('DOMMouseScroll', function (e) {
        if (e.originalEvent.detail > 0) {
            scrollDown();
        } else {
            scrollUp();
        }

        //prevent page fom scrolling
        return false;
    });

    //IE, Opera, Safari
    $('#body').bind('mousewheel', function (e) {
        if (e.originalEvent.wheelDelta < 0) {
            scrollDown();
        } else {
            scrollUp();
        }
        //prevent page fom scrolling
        return false;
    });

    function scrollDown() {
        //scroll down
        console.log('Down ' + scroll);
        if (scroll < $('#target').find('div').height() - $('#target').height() + 20) {
            scroll = $('#target').scrollTop() + 5;
            $('#target').scrollTop(scroll);
        }
    };

    function scrollUp() {
        //scroll up
        console.log('Up ' + scroll);
        if (scroll > 0) {
            scroll = $('#target').scrollTop() - 5;
            $('#target').scrollTop(scroll);
        }
    };
});

Примечание. Я добавил div для расчета высоты.

<div id="target"><div>.... </div></div>

Вы можете немного почистить этот код, кэшируя некоторые переменные jquery, но идея есть

person Huangism    schedule 20.03.2014
comment
Отлично. Я бы никогда не догадался протестировать e.originalEvent.detail, и у меня было бы еще меньше шансов обнаружить e.originalEvent.wheelDelta. Это легко, когда вы знаете, как это сделать, но когда вы не знаете, есть ли конкретное место, где можно это узнать? Отдельные книги или онлайн-ссылки, или можно учиться, просто задавая вопросы на форумах? - person Laurence Lord; 21.03.2014
comment
Я только что погуглил и узнал о прокрутке в stackoverflow - person Huangism; 21.03.2014
comment
Отлично! Как бы вы изменили его для планшетов/смартфонов? Значит, вместо слушателей колесика мыши будут слушатели сенсорной прокрутки? - person Kyle Bachan; 10.06.2014
comment
@Kyle для сенсорных устройств вы можете просто привязать прокрутку с помощью jquery, сложной частью этого вопроса было колесико мыши. Обнаружение нормальной прокрутки легко api.jquery.com/scroll привязать прокрутку к окну, и вы можете делать что-то по мере прокрутки страницы - person Huangism; 10.06.2014
comment
Как будет выглядеть метод? Я попытался привязать прокрутку вместо колесика мыши, но моя страница остается статической. Я полагаю, я не уверен, какой метод вызывать из e. Я создал альтернативный метод поиска в stackoverflow, но страница осталась прежней (единственное, что работает для меня, это колесико мыши). вар lastScrollTop = 0; jQuery(window).bind('scroll', function (e) { var st = jQuery(window).scrollTop(); if (st › lastScrollTop){ scrollDown(); } else { scrollUp(); } lastScrollTop = st ; вернуть ложь; }); - person Kyle Bachan; 10.06.2014
comment
Вот мой вопрос: stackoverflow.com/questions/24145169/ - person Kyle Bachan; 10.06.2014