колесо мыши перестает прокручиваться, пока я не переместлю мышь в другое место Chrome - jQuery - PullRequest
Новая
       50

колесо мыши перестает прокручиваться, пока я не переместлю мышь в другое место Chrome - jQuery

1 голос
/ 25 сентября 2019

У меня есть раздел на основе прокрутки.Идея состоит в том, что вы прокручиваете, вы путешествуете от 1 до 2 до 3, а затем переходите к следующему разделу.

Все работает нормально, кроме одного сбоя - если мышь не двигается и используется только колесо, после 1, 2,3 закончен, прокрутка перестает работать и не позволяет прокручивать дальше вниз, и то же самое происходит для вверх.

Я проверил и нашел несколько статей, объясняющих, что это может быть проблема Chrome, потому что этоотлично работает на Edge, Safari.Я вижу эту проблему только в Chrome.Любые идеи будут оценены.

Вот моя скрипка, где вы можете увидеть это в действии. 

jQuery(document).ready(function($){
var $container = $('#scrolling-container'),
    top = 0,
    lastScrollTop = 0,
    proceedFlag = true;

var scroller = function(event) {
    top += $container.height() * (($(this).scrollTop() > top) ? 1 : -1);

    var firstBarItem = jQuery(".bf-content:first-child"); 
    if (top == 0 || top <= lastScrollTop){
        // upscroll code
        var previousBarItem = jQuery(".bf-content.active").prev();

        if(previousBarItem.length && previousBarItem.hasClass('bf-content')){
            jQuery(".bf-content.active").removeClass('active');
            previousBarItem.addClass('active');
        }else{
            jQuery('html, body').stop().animate({'scrollTop': jQuery(".top-section").offset().top}, 300, 'swing', function(){
                var $target = jQuery(".top-section");
                $target.focus();
            });

        }
    } else {
        // downscroll code
        var nextBarItem = jQuery(".bf-content.active").next();

        if(nextBarItem.length && nextBarItem.hasClass('bf-content')){
            jQuery(".bf-content.active").removeClass('active');
            nextBarItem.addClass('active');
        }else{
            jQuery('html, body').animate({'scrollTop': jQuery(".bottom-section").offset().top}, 150, 'swing', function(){
                var $target = jQuery(".bottom-section");
                $target.focus();
            });
        }
    }

    lastScrollTop = top;
    if(proceedFlag){
        $container.stop().animate({scrollTop: top}, 300, 'swing', function() {
            $(this).clearQueue().one("scroll", function() {
                $(this).one("scroll", scroller);
                jQuery('html, body').stop().animate({'scrollTop': jQuery("#scrolling-container").offset().top}, 300, 'swing');
                jQuery("#scrolling-container").focus();
            });
        });

        return;
    }
}

$container.one("scroll", scroller);

});
...