因此,空格滚动是一个典型的,如果不是常用的浏览器功能。我注意到,当使用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
发布于 2016-04-25 10:15:16
我认为你看到的问题是按钮上的focus
有问题。当动画事件触发时,页面会滚动,但焦点仍停留在click me to scroll
按钮上。当您按空格键时,它会再次触发按钮事件,因为它仍然是焦点事件。
如果您删除按钮焦点,滚动与空格似乎是正确的。
$('button').click(function () {
$('html, body').animate({
scrollTop: $(window).height()
}, 600);
$(this).blur();
});
https://stackoverflow.com/questions/36847604
复制相似问题