如何停止滚动动画

Question

I was wondering how I could make it so that the scrolling animation stops when you hover on the <h1> element.

 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

You can use an interval which automatically repeats each n milliseconds and stop it on a mouseover event:

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

});

I added a simple bool variable which allows your scrolling text to stop and start, I also added mouseover and mouseout event to enable the scrolling or disable the scrolling

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>

here you go, https://jsfiddle.net/kriz1439/ca5b9do6/

Answer 4

You can use cancelAnimationFrame(id); to stop the animation, where id is the return value from window.requestAnimationFrame(scrollSlow);

Source: https://css-tricks.com/using-requestanimationframe/

Also, it is not required to use setInterval when you use requestAnimationFrame. You may read it in the above link.