Включение/запуск эффекта колесика мыши ТОЛЬКО на определенном div (не на всю страницу)

Я пишу это после поиска событий колесика мыши в jQuery, но, возможно, я задаю неправильные вопросы из-за недостатка знаний, и поэтому я пока не нахожу полезных ответов.

Чего я хотел бы добиться, так это эффекта колесика мыши, который я могу запускать только внутри определенного div под названием #scroller. Я использую плагин jquery mousewheel от Брэндона Аарона и скрипт, который обновляет верхнее значение до следующего или предыдущего слайда .js всякий раз, когда я прокручиваю дельту.

ССЫЛКА НА FIDDLE: я создал эту ссылку на эту скрипку. Как видите, он «перескакивает» со слайда на слайд, но тогда содержимое вне #scroller становится недоступным! Я хотел бы, чтобы у него было нормальное поведение колесной мыши: S. У меня также есть рабочий URL-адрес, где я хотел бы применить этот эффект, если вы считаете, что это может быть полезно.

Чтобы лучше объяснить структуру и желаемый эффект, вот изображение:

введите здесь описание изображения

Я уже пытался привязать свой скрипт только к $('#scroller').mouseover(function(){ my script });, но это не сработало. Колесо мыши запустилось нормально, оно нормально переключилось в режим прыжков, но так и не вернулось в нормальное состояние после выхода из div #scroller, и я не могу найти, как сбросить это поведение.

Мой сценарий прямо сейчас таков:

jQuery(document).ready(function($) {

    var slide = $('.js-slide');
    var sectionHeight = $(window).height();
    var slideHeight = $(slide).height();    
    var scrollingScreen = false;

        $('#scroller').mouseover(function(){

            $(slide).mousewheel(function(event, delta) {
                if ( !scrollingScreen ) {
                    scrollingScreen = true; // prevent call
                    var top = $("body").scrollTop() || $("html").scrollTop();
                    // Chrome places overflow at body, Firefox places whacks at html...
                    // Finds slide headers above/below the current scroll top
                    var candidates = $(slide).filter(function() {
                        if ( delta < 0 )
                            return $(this).offset().top > top + (1);
                        else
                            return $(this).offset().top < top - (1);
                    });
                    // one or more slides found? Update top
                    if ( candidates.length > 0 ) {
                        if ( delta < 0 )
                            top = candidates.first().offset().top;
                        else if ( delta > 0 )
                            top = candidates.last().offset().top;
                    }
                    // Perform animated scroll to the right place
                    $("html,body").animate({ scrollTop:top }, "easeInOutQuint", function() {
                        scrollingScreen = false; // Release call
                    });
                }
                return false; 
            }); // closes mousewheel

       }); // closes mouseover

});

Будем очень признательны за любую помощь или понимание того, как этого добиться.

Спасибо!


javascript html jquery css mousewheel
person Bea Cabrera    schedule 22.10.2014    source источник
comment
Добавьте сюда свой HTML и CSS и опубликуйте демонстрацию на jsfiddle.net . Исправьте ошибки, такие как $('#scroller') ‹- Добавить кавычки; slide.mousewheel( ‹- Нет необходимости снова оборачивать $(), так как это уже объект jQuery. Почему вы проверяете положение прокрутки всей страницы, используя $("body").scrollTop()?   -  person sabithpocker    schedule 22.10.2014
comment
Спасибо за исправление '#scroller'. У меня было правильно в моем сценарии, но я скопировал это неправильно. // Хорошо, не знал. Спасибо. // Я проверяю scrollTop() в верхней части тела, потому что изначально он был разработан для работы со всей страницей. Теперь, когда я хочу ограничить его div #scroller, думаю, я мог бы изменить его на $('#scroller').scrollTop(). // О, и спасибо Рори МакКроссан за встроенное редактирование изображения :).   -  person Bea Cabrera    schedule 22.10.2014

Ответы (1)


arrow_upward
1
arrow_downward

Ok. Наконец-то я нашел его!! Я просмотрел Интернет, где автор плагина записывает различные события колесика мыши, в том числе деактивирует их все и сбрасывает обычную прокрутку мыши. Вот где я нашел применение функции .unmousewheel(), именно то, что я хотел!

Но теперь, так как скрипт не может найти последующие слайды после последнего при прокрутке вниз и до первого при прокрутке вверх, стало невозможно получить доступ к содержимому до и после #scroller с помощью колеса прокрутки. Поэтому мне пришлось немного изменить сценарий и принудительно сделать прыжок на первом слайде или на последнем.

В любом случае, вот сценарий:

jQuery(document).ready(function($) {

    var slide = $('#scroller .sectioncontainer');
    var sectionHeight = $(window).height();
    var slideHeight = slide.height();
    var scrollingScreen = false;

    slide.mousewheel(function(event, delta) {
        if ( !scrollingScreen ) {
            scrollingScreen = true; // prevent call

            var top = $("body").scrollTop() || $("html").scrollTop();
            // Chrome places overflow at body, Firefox places whacks at html...

            // Finds slide headers above/below the current scroll top
            var candidates = slide.filter(function() {
                if ( delta < 0 )
                    return $(this).offset().top > top + (1/120);
                else
                    return $(this).offset().top < top - (1/120);
            });

            // one or more slides found? Update top
            if ( candidates.length > 0 ) {
                if ( delta < 0 )
                    top = candidates.first().offset().top;
                else if ( delta > 0 )
                    top = candidates.last().offset().top;
            } else{ // no more slides found
                     if ( delta < 0 )
                    top = $("#contact").offset().top;
                else if ( delta > 0 )
                    top = $("#about").offset().top;
            }

            // Perform animated scroll to the right place
            $("html,body").animate({ scrollTop:top }, "easeInOutQuint", function() {
                scrollingScreen = false; // Release call
            });
        }
        return false; 
    });

    $("#contact").unmousewheel();
    $("#about").unmousewheel();
    $("#div1").unmousewheel();
    $("#div2").unmousewheel();
    $("#div3").unmousewheel();
    $("#div4").unmousewheel();
    $("#div5").unmousewheel();
    // . . . 
    //and all other divs and sections that don't use the mousewheel

});

А вот и результат.

person Bea Cabrera    schedule 30.10.2014