How to Stop Scrolling Animation

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>

Have you checked here: http://stackoverflow.com/questions/7571370/jquery-disable-scroll-when-mouse-over-an-absolute-div — Dan Hall, Dec 21 '15 at 09:07

score 0 · Answer 1 · answered Dec 21 '15 at 09:15

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>

score 0 · Accepted Answer · answered Dec 21 '15 at 09:19

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

Might not be the best solution, but certainly not worth a down-vote (is that sour grapes I detect?) :) — iCollect.it Ltd, Dec 22 '15 at 11:03

Krishna Kamal · Answer 3 · 2015-12-21T09:46:23.730

      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/

score -1 · Answer 4 · answered Dec 21 '15 at 09:34

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.

How to Stop Scrolling Animation

4 Answers4