jQuery 动画打破空格键滚动答案

【问题标题】：jQuery animate breaks spacebar scrollingjQuery 动画打破空格键滚动
【发布时间】：2016-04-25 17:48:53
【问题描述】：

所以空格键滚动是一个典型的，如果不是浏览器上常用的功能。我注意到使用 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 和 jQuery v2.1.4 上使用 Chrome 49.0.2623.112

【问题讨论】：

标签： javascript jquery scroll jquery-animate

【解决方案1】：

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

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

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

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

【讨论】：