jQuery 动画中断空格键滚动

Question

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

$('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 和 jQuery v2.1.4

上使用 Chrome 49.0.2623.112

Answer 1

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

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

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

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

jQuery 动画中断空格键滚动

jQuery animate breaks spacebar scrolling

javascript

jquery

scroll

jquery-animate