Question

我使用HTML5音频标签播放一些背景音乐，我希望当用户滚动到某个点时音乐暂停，并在用户滚动回到顶部时重新开始...这可能吗？

提前致谢！

Answer 1

以下示例（普通javascript，没有jQuery）会暂停音频，如果您向下滚动滚动条350px（并在返回顶部时再次播放）;

＆＃13;

window.addEventListener("scroll", myFunction);

function myFunction() {
    if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
        document.getElementById("player").pause(); 
    } else {
        document.getElementById("player").play();  
    }
}

＆＃13;

body {
  background: tomato;  
}

＆＃13;

<audio controls autoplay loop id=player>
  <source src="http://www.youtube.com/audiolibrary_download?vid=7fad087239069cd4" type="audio/mpeg">
</audio>
<p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p>

＆＃13;

Answer 2

您可以将scroll事件绑定到窗口并触发$('video')的foreach并在限制时调用pause方法，并且play何时偏移为0 < / p>

$(window).on('scroll',function(e){
   if (document.body.scrollTop === 0) $('video').forEach(function(){this.play()});
   if (document.body.scrollTop > 100) $('video').forEach(function(){this.pause()});
})

在滚动上暂停背景音乐

2 个答案: