jQuery animate 会中断空格键滚动

jQuery animate breaks spacebar scrolling

本文关键字：空格键 滚动 中断 animate jQuery      更新时间：2023-09-26

所以空格键滚动是浏览器上一个典型的功能，如果不是常用的话。我注意到在使用jQuery触发滚动时此功能已损坏（请参阅嵌入"全屏"）。还有其他人遇到此问题吗？如果是这样，您是如何解决的？

$('button').click(function () {
     $('html, body').animate({
        scrollTop: $(window).height()
    }, 600); 
});
body {
  border: 1px solid red;
  height: 600vh;
}
div {
  margin-top: 100vh;
  height: 50vh;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click me to scroll!</button>
<div>scroll to this section</div>

在OSX上使用Chrome 49.0.2623.112和jQuery v2.1.4

我认为您看到的问题是按钮上的focus问题。 当 animate 事件触发时，页面会滚动，但焦点仍停留在click me to scroll按钮上。 当您按空格键时，它会再次触发按钮事件，因为它仍然处于焦点状态。

如果删除按钮焦点，则使用空格键滚动似乎可以正常工作。

$('button').click(function () {
     $('html, body').animate({
        scrollTop: $(window).height()
    }, 600); 
    $(this).blur();
});

http://jsfiddle.net/CnEUh/3121/

相关文章：