Имейте работу прокрутки, только перемещает один пиксель - PullRequest
Новая
       10

Имейте работу прокрутки, только перемещает один пиксель

0 голосов
/ 16 ноября 2009

У меня есть блок кода, который прокручивает страницу вверх с помощью animate jQuery, но для повышения удобства использования, если пользователь каким-либо образом нарушает движение прокрутки (например, колесо прокрутки, захват полосы прокрутки и т. Д.), Затем это немедленно остановит движение.

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

Это код, который у меня есть: 

$(document).ready(function() {
    // scroll to top: check if user / animate is scrolling
    var scrollAnimating = false;

    jQuery.fx.step.scrollTop = function(E) {
        scrollAnimating = true;
        E.elem.scrollTop = E.now;
        scrollAnimating = false;
    };

    // go to top (on click)
    $('#gototop').click(function() {
        $(this).fadeOut(100,function() {
            $(this).css({backgroundColor: '#CCC'}).html('Going... (scroll to stop)').fadeIn(100, function() {
                $('html,body').animate({scrollTop:0},3000);
            })
        });

        $(window).scroll(function() {
            if (!scrollAnimating) {
                $('html,body').stop();
                $('#gototop').html('Go to top');
            };
        });

        resetNames();

        return false;
    });

    function resetNames() {
        setTimeout(function() {
            $('#gototop').html('Go to top').css({backgroundColor: '#DDD'});
        },3000);
    }
});

В основном при нажатии #gototop он начинает анимировать прокрутку к вершине. Если прокрутка нарушена, движение прокрутки прекращается, и текст для #gototop сбрасывается.

Есть несколько проблем с этим кодом: некоторые части смехотворно неэффективны, и он не работает в браузерах на основе Gecko (крупная компания).

Как мне заставить его работать? Любые указатели о том, как сделать его эффективным?

Ответы [ 2 ]

0 голосов
/ 09 августа 2013

Просто хотел ответить на вопрос для любого, кто найдет этот вопрос через Google:

Нашел ответ здесь: позволить прокрутке пользователя остановить анимацию jquery на scrolltop?

По сути, вместо использования переменных и проверки прокрутки переменной, свяжите функцию с 'html, body', которая активируется только тогда, когда пользователь выполняет прокрутку и останавливает анимацию.

По существу: 

// Stop the animation if the user scrolls.
$('html, body').bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
    if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
        $('html, body').stop();
    }
});

Ответ основан на контексте OP: 

$(document).ready(function() { 
    // go to top (on click)
    $('#gototop').click(function() {
        $(this).fadeOut(100,function() {
            $(this).css({backgroundColor: '#CCC'}).html('Going... (scroll to stop)').fadeIn(100, function() {
                $('html,body').animate({scrollTop:0},3000);
            })
        });
        return false;
    });
});
function resetNames() {
    setTimeout(function() {
        $('#gototop').html('Go to top').css({backgroundColor: '#DDD'});
    },3000);
}
// Stop the animation if the user scrolls.
$('html, body').bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
    if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
        $('html, body').stop();
        resetNames();
    }
});

Примечание: не проверено, и я думаю, что это, вероятно, остановит и все другие анимации.

0 голосов
/ 16 ноября 2009

Попробуйте просто использовать селектор $ ('body') для Gecko, также вы, вероятно, обнаружите, что ваша анимация не работает в Opera тоже, потому что и html, и body селекторы могут использоваться, и операция выполняется дважды. Попробуйте что-то вроде этого (небольшой тестовый пример): 

    <html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            function scrollWin()
            {
                $('body').animate({scrollTop: $('html').offset().top}, 2000);
            }

            function scrollStop()
            {
                $('body').stop();
            }
        </script>
    </head>
    <body onkeyup="scrollStop()">
        <div style="background:grey;height:1500px"></div>
        <input type="button" onclick="scrollWin();" value="Scroll up" />
    </body>
</html>

Единственное, что с этим происходит, если вы нажмете что-то вроде ввода или пробела, вы остановите анимацию, но перезапустите ее снова, так как у вас все еще есть выбранная кнопка, поэтому любая другая клавиша будет работать или вы можете нажать на документ кнопку), а затем используйте клавишу ввода или пробел ... в основном, onkeyup был просто еще одним событием, чтобы показать вам, что вы действительно ищете $ ('body'). stop ().

...