Question

因此，空格键滚动是浏览器上的典型（如果不常用）功能。我注意到在使用jQuery触发滚动时这个功能被破坏了（参见嵌入＆＃34;全屏＆＃34;）。其他人遇到这个问题？如果是这样，你是如何解决它的？

＆＃13;

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

＆＃13;

body {
  border: 1px solid red;
  height: 600vh;
}

div {
  margin-top: 100vh;
  height: 50vh;
  background-color: green;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

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

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

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

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

jQuery动画打破空格键滚动

1 个答案: