У меня есть прокрутка, только перемещается на один пиксель

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

Я задал вопрос об этом неделю назад here, но после того, как некоторые тестеры попробовали код, они сообщили, что он не работает в браузерах на базе 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 (biggie).

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

источник

2009-11-16 Brandon Wang

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

<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() что вы на самом деле после.

источник

2009-11-16 06:01:14 SimonDever

Мне нужно, чтобы он работал во всех браузерах (за исключением IE: если он там не работает, отлично со мной). Возможно, мне стоит попробовать какой-то скрипт для обнаружения браузера? –

Вы пробовали мой скрипт в своих браузерах? Каков был результат? – SimonDever

Не нужно было, потому что вы полностью пропустили точку всей сложной информации (не намереваясь нанести вред): весь код должен автоматически останавливать прокрутку, когда он обнаруживает, что пользователь пытается противостоять прокрутке (например, остановить это читать). очевидно, что ваш код этого не делает. Сожалею. –

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

нашел ответ здесь: let user scrolling stop jquery animation of 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(); 
    } 
});

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

источник

2013-08-09 08:28:57 ChooJeremy

У меня есть прокрутка, только перемещается на один пиксель

ответ

Смежные вопросы