首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >jQuery动画中断空格滚动

jQuery动画中断空格滚动
EN

Stack Overflow用户
提问于 2016-04-25 09:48:53
回答 1查看 82关注 0票数 0

因此,空格滚动是一个典型的,如果不是常用的浏览器功能。我注意到,当使用jQuery触发滚动时,这个功能已经中断(请参阅嵌入在“全屏”上)。还有其他人遇到这个问题吗?如果是的话,你是如何解决的?

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('button').click(function () {
     $('html, body').animate({
        scrollTop: $(window).height()
    }, 600); 
});
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
body {
  border: 1px solid red;
  height: 600vh;
}

div {
  margin-top: 100vh;
  height: 50vh;
  background-color: green;
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-04-25 10:15:16

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

如果您删除按钮焦点,滚动与空格似乎是正确的。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('button').click(function () {
     $('html, body').animate({
        scrollTop: $(window).height()
    }, 600); 
    $(this).blur();
});

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36847604

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文