Javascript Jquery在不可见时滚动到div，并在用户交互时停止滚动

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

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

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

更新

对于处理多个事件，最好绑定这些事件。例如，

单击

启动动画，然后

按键

停止动画：

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

        }); 

对于移动设备，您可以添加点击、滑动等。。。使用jquerymobile（）

代码笔

===

jqueryanimate函数有一个步骤回调，可以用来检查用户是否单击或按下某个键

为每个动画对象的每个动画属性调用的函数 元素。此功能提供了修改吐温的机会 对象在设置属性之前更改属性的值

信息：

我在这里举了一个例子：

HTML

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

JS

#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;
}

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

更新

对于处理多个事件，最好绑定这些事件。例如，

单击

启动动画，然后

按键

停止动画：

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

        }); 

对于移动设备，您可以添加点击、滑动等。。。使用jquerymobile（）

代码笔

===

jqueryanimate函数有一个步骤回调，可以用来检查用户是否单击或按下某个键

为每个动画对象的每个动画属性调用的函数 元素。此功能提供了修改吐温的机会 对象在设置属性之前更改属性的值

信息：

我在这里举了一个例子：

HTML

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

JS

#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;
}

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

---

最好的方法是在启动动画时注册一个事件，然后注销该事件，这样随着时间的推移，元素上注册的事件就不会太多

要停止动画，可以使用以下代码

$('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);

---

最好的方法是在启动动画时注册一个事件，然后注销该事件，这样随着时间的推移，元素上注册的事件就不会太多

要停止动画，可以使用以下代码

$('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);

---

---

@daliaessam：你的意思是说，如果你用这个代码更改滚动条，它需要很多时间，用户必须等到到达那个地方。。。是吗？@Rejith R Krishnan不，请在评论之前阅读。我说过，如果不可见，它可以在滚动时正常工作，但如果用户执行任何操作（如敲击键盘或鼠标），我需要它停止滚动。是的，默认情况下，我需要它在4秒钟内缓慢滚动。@Parga Bhayani请阅读完整的问题，我没有看到任何不清楚的地方。@daliasessam：好的，问题现在清楚了，仍然需要澄清一件事，如果你的动画到达一半，如果用户单击，那么滚动应该立即在中途停止。。。对/@Parag Bhayani是的，你是对的。如果用户在滚动时执行任何操作，则应立即停止滚动，以便用户可以进行交互。@daliaessam:那么您的意思是，如果您使用此代码更改滚动，则需要花费大量时间，用户必须等待到达该位置。。。是吗？@Rejith R Krishnan不，请在评论之前阅读。我说过，如果不可见，它可以在滚动时正常工作，但如果用户执行任何操作（如敲击键盘或鼠标），我需要它停止滚动。是的，默认情况下，我需要它在4秒钟内缓慢滚动。@Parga Bhayani请阅读完整的问题，我没有看到任何不清楚的地方。@daliasessam：好的，问题现在清楚了，仍然需要澄清一件事，如果你的动画到达一半，如果用户单击，那么滚动应该立即在中途停止。。。对/@Parag Bhayani是的，你是对的。如果用户在滚动时执行任何操作，它应该立即停止滚动，以便用户可以进行交互。很好，使用鼠标单击。你能为鼠标滚轮、键盘、任何按钮点击、移动设备上的触摸添加事件吗？@stig js:不知道你为什么要对此进行投票，但这肯定不是一个好方法，在转换过程中会多次调用step函数，你每次都在上面注册点击事件。。。因此，过了一段时间后，您可能已经注册了数百次click events…@ParagBhayani我已经更新了答案，bind更适合于多个事件。@stig js我想要的是DOM就绪，如果div不可见，它会自动滚动到它，但如果用户在滚动时执行任何操作，如鼠标、键盘或触摸，滚动应立即停止。那么应该使用什么实现呢？您应该使用bind handlersGreat，使用鼠标单击。你能为鼠标滚轮、键盘、任何按钮点击、移动设备上的触摸添加事件吗？@stig js:不知道你为什么要为此进行投票，但这肯定不是一个好方法，在转换过程中会多次调用step函数，你正在注册click eve