如何停止滚动动画

Question

我想知道如何才能让滚动动画在您将鼠标悬停在 <h1> 元素上时停止。

function scrollSlow() {
   window.scrollBy(0, 1.5);

   setTimeout(function(){
      window.requestAnimationFrame(scrollSlow);
   }, 50);
}

scrollSlow();

p {
   font-size: 80px;
}
h1 {
   position:fixed;
   top:10px;
   left:5px;
}

<h1>
   Hover me
</h1>
<p>
   Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.

   Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.
</p>

Answer 1

您可以使用每 n 毫秒自动重复的间隔，并在 mouseover 事件发生时停止：

var interval = setInterval(function() {
  window.requestAnimationFrame(function() {
    window.scrollBy(0, 1.5);
  });
}, 50);

document.getElementById('my-title').onmouseover = function() {
  clearInterval(interval);
};

p{
  font-size: 80px;
}
h1{
  position:fixed;
  top:10px;
  left:5px;
}

<h1 id="my-title">
Hover me
</h1>
<p>
Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.
Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.Poetry used by permission of the publishers and the Trustees of Amherst College from The Poems of Emily Dickinson, Ralph W. Franklin ed., Cambridge, Mass.: The Belknap Press of Harvard University Press. Copyright © 1998 by the President and Fellows of Harvard College. Copyright © 1951, 1955, 1979 by the President and Fellows of Harvard College.
</p>

Answer 2

jsFiddle : https://jsfiddle.net/CanvasCode/ndeg1rkL/

javascript

var stopScroll = false;

$(function() {

  function scrollSlow() {
    if (!stopScroll) {
      window.scrollBy(0, 1.5);

      setTimeout(function() {
        window.requestAnimationFrame(scrollSlow);
      }, 50);
    }
  }

  $('h1').mouseover(function() {
    stopScroll = true;
  });

  $('h1').mouseout(function() {
  console.log("Mouseout");
    stopScroll = false;
    scrollSlow();
  });

  scrollSlow();

});

我添加了一个简单的 bool 变量，它允许您的滚动文本停止和开始，我还添加了 mouseover 和 mouseout 事件来启用或禁用滚动

Answer 3

      function scrollSlow(){
               window.scrollBy(0, 1.5);

      setTimeout(function(){
                 window.requestAnimationFrame(scrollSlow);
                        }, 50);   }

          scrollSlow();



           document.getElementById("outer").onmouseover = 
             function disableScrolling(){
         var x=window.scrollX;
         var y=window.scrollY;
            window.onscroll=function(){window.scrollTo(x, y);};
         }

              document.getElementById("outer").onmouseleave  = function
         enableScrolling(){
                 window.onscroll=scrollSlow();
                   }

html :

     <h1 id="outer">
        Hover me
     </h1>
   <p id="block">
     Poetry used by permission of the publishers a........
   </p>

给你，https://jsfiddle.net/kriz1439/ca5b9do6/

Answer 4

你可以使用cancelAnimationFrame(id);停止动画，其中 id 是来自 window.requestAnimationFrame(scrollSlow);

的 return 值

来源：https://css-tricks.com/using-requestanimationframe/

另外，使用requestAnimationFrame时不需要使用setInterval。您可以在上面阅读 link.

如何停止滚动动画

How to Stop Scrolling Animation

javascript

jsfiddle