如何停止滚动动画

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

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 2

您可以使用每隔 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 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)的返回值；

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

另外，使用 requestAnimationFrame 时也不需要使用 setInterval。您可以在上面的链接中阅读它。