Question

我使用下面的jquery代码让页面平滑滚动到特定div，如果它当前在屏幕上不可见：

    if (!$('#list-panel').visible(true)) {
    $('html, body').animate({ scrollTop: $('#article-panel').offset().top - 150}, 4000);
}

这可以根据需要正常工作。我想要的是如果用户在滚动时按下键盘或鼠标上的任何键，它应该停止滚动，以便用户可以正常交互。目前，用户必须等到滚动完成。请注意，默认情况下，我需要它在4秒内看到代码时缓慢平滑地滚动，但如果用户决定不等待并按下键盘或鼠标，则滚动应立即停止。

Answer 1

<强> 更新

为了处理多个事件，最好绑定这些事件。例如，click启动动画，keypress停止动画：

$('html, body').bind({
          'click' : function(){
            $('html, body').animate({ scrollTop: $('#d4').offset().top}, {duration:4000});
          },
          'keyup' : function(){
            $('html, body').stop();
          }

        });

对于移动设备，您可以使用jQuery mobile（https://jquerymobile.com/）添加点击，滑动等...

代码笔 https://codepen.io/anon/pen/RRworb

===

jQuery animate函数有一个步骤回调，您可以使用它来检查用户是否已点击或按下某个键。

为每个动画的每个动画属性调用的函数元件。此函数提供修改Tween的机会 object在设置之前更改属性的值。

信息：http://api.jquery.com/animate/

我在这里做了一个例子：

<强> HTML

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>

<强> CSS

#d1, #d2, #d3, #d4 {
  height: 300px;
  width: 100%;
}

#d1{
  background-color: red;
}

#d2{
  background-color: blue;
}

#d3{
  background-color: black;
  display: none;
}

#d4{
  background-color: yellow;
}

<强> JS

if ( $('#d3').css('display') == 'none' ) {

    $('html, body').animate({ scrollTop: $('#d4').offset().top}, {duration:4000,
                           step : function(){
        $('html, body').on('click',function(e){
          $('html, body').stop();
        });
    }});
}

<强> CodePen https://codepen.io/anon/pen/zBYoOj

Answer 2

最好的方法是在开始动画时注册一个事件，然后取消注册事件，这样就可以在元素上没有太多已注册的事件

停止您可以在代码下面使用的动画

$('html, body').stop();

在任何特定事件中，它变为

$('html, body').on('click'), function() {
    $('html, body').stop();
}

但是现在你只想在动画开始时这样做，你需要只调用一次该事件处理程序，所以它应该是

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

$('html, body').animate({ scrollTop: $('#article-panel').offset().top - 150}, {duration:5000}).one("click", stopScroll);

但您也希望在代码完成执行后取消注册事件

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

$('html, body').animate({ scrollTop: $('#article-panel').offset().top - 150}, {duration:5000, complete:function(){
    $('html, body').un("click", stopScroll);
}}).one("click", stopScroll);

如果不可见，Jquery滚动到div并停止滚动用户交互

2 个答案: