اتصل بالتمرير فقط عند تمرير المستخدم، وليس عند التحريك ()

Question

لدي بعض الروابط عبر الصفحة بغرض "الذهاب إلى الأعلى"، أنجزت من خلال التمرير الصفحة إلى الأعلى مع الرسوم المتحركة لطيفة. لقد لاحظت أنه في بعض الأحيان أثناء التمرير، سترغب المستخدم في التمرير مرة أخرى، على سبيل المثال، ولكن هذا غير ممكن. سوف تلعثم الشاشة فقط ولكن سيستمر في التحريك حتى يصل إلى القمة.

أريد إيقاف الرسوم المتحركة إذا حاول المستخدم التمرير، لذلك كتبت هذا الرمز:

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);
    $(window).scroll(function () {
        $('body').stop();
});
    return false;
})

هذا الرمز هو إشكالية، لأن التحريك () تحسب كغير التمرير، وبالتالي فإنه يتحرك بت صغير قبل أن يتوقف عن نفسه.

لقد جربت أيضا المفتاح كخيار، لكن تمرير الماوس لا يسجل كمفتاح.

هل هناك أي طريقة لاستدعاء وظيفة التمرير الخاصة بي عند المستعمل مخطوطات، وليس التحريك ()؟

Answer 1

يمكنك كتابة التعليمات البرمجية الخاصة بك لتعيين قيمة الرسوم المتحركة، وتعيين علامة تشير إلى أن التغيير يأتي من الرسوم المتحركة.

على سبيل المثال: (غير مختبر)

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

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);
    $(window).scroll(function () {
        if (!scrollAnimating)
            $('body').stop();
    });
    return false;
})

يمكنك أن تفعل الشيء نفسه ل scrollLeft.

لاحظ أنني أفترض أن الإعداد scrollTop هي مكالمة إعادة إدخال، بحيث scroll يتم إطلاق الحدث داخل الخط E.elem.scrollTop = E.now. وبعد إذا لم يكن الأمر كذلك (قد يكون فقط في بعض المتصفحات)، فسيتم تشغيل الحدث بعد scrollAnimating يعود إلى false. وبعد لإصلاح ذلك، يمكنك إعادة تعيين scrollAnimating داخل scroll حدث.

Answer 2

كنت مع نفس المشكلة، لكنني وجدت حل صحيح في وثائق مسج. هناك عقار في طريقة تحريك يتيح لك تعيين وظيفة رد الاتصال عند اكتمال الرسوم المتحركة.

http://api.jquery.com/animate/#animate-properties-duration-Easing-complete.

هنا هو الرمز:

$('#gototop').click(function() {

    //This will help you to check 
    var animationIsFinished = false;

    $('body').animate({scrollTop:0},3000,"swing",function(){

        //this function is called when animation is completed
        animationIsFinished = true;

    });
    $(window).scroll(function () {
        //Check if animation is completed
        if ( !animationIsFinished ){
            $('body').stop();
        }
    });
    return false;
})

Answer 3

اكتشفه! بعد النظر حولها على الإنترنت وجدت شيئا يسمى Document.addEventListener ل mozilla و document.onmousewheel بالنسبة إلى IE والأوبرا التي ستحمل أحداث التمرير.

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);

    if(window.addEventListener) document.addEventListener('DOMMouseScroll', stopScroll, false);
    document.onmousewheel = stopScroll;

    function stopScroll() {$('body').stop()};

    return false;
})