如何停止滚动动画

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

}); 

我添加了一个简单的布尔变量，它可以让你的滚动文本停止和启动，我还添加了鼠标悬停和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要求。你可以在上面的链接中阅读它。