首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >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

复制
相关文章
npm与nvm的冲突处理
node本身包含一个npm,后来本人通过它安装nvm来管理npm版本,长期以来一直相安无事,再后来在终端使用中莫名其妙出现一个奇怪问题——无论在独立终端,还是vscode的集成终端,输入以下命令都能打印一样结果:
IT晴天
2019/05/14
1.3K0
处理 WebView 与 ViewPager 滑动冲突
问题场景 在项目的App中,有一个ViewPager,它内部包含了WebView,而内部的webview加载了一个可以滑动的网页。
技术小黑屋
2020/02/10
2.1K0
ElasticSearch 冲突问题处理
当我们使用 index API 更新文档 ,可以一次性读取原始文档,做我们的修改,然后重新检索整个文档。最近的检索请求将获胜:无论最后哪一个文档被检索,都将被唯一存储在 Elasticsearch 中。如果其他人同时更改这个文档,他们的更改将丢失。
用户9615083
2022/12/25
6370
ElasticSearch 冲突问题处理
冲突和谈判的处理原则
----------------------------------------------------------------------------
PM吃瓜
2023/03/02
1940
冲突和谈判的处理原则
逻辑删除与联合索引冲突处理
然后今天跟朋友探讨了下,决定使用datetime作为逻辑删除字段的类型,如果未删除,则字段为魔法值的固定时间,已删除,则设为删除时的时间
阿超
2022/08/17
6490
逻辑删除与联合索引冲突处理
Git 处理文件与 Revison 冲突问题
有一次,尝试使用git log 来查看某个分支(build.gradle)的历史提交时,遇到了这样的问题
技术小黑屋
2021/04/26
6790
多主复制下处理写冲突(1)-同步与异步冲突检测及避免冲突
如两个用户同时编辑wiki,如图-7。用户1将页面标题从A-》B,且用户2同时将标题从A-》C。每个用户的更改都成功提交到本地主节点。但当异步复制到对方时,发现存在冲突。正常的主从复制则不会出现此问题。
JavaEdge
2022/08/01
1K0
多主复制下处理写冲突(1)-同步与异步冲突检测及避免冲突
git 通过 SublimeMerge 处理冲突
在使用 Git 的时候,如果是多个小伙伴开发,那么如果同时修改一个文件将出现冲突。也就是在自动合并的时候不知道使用哪个代码才对,此时就需要合并工具的协助。我找了很久发现 SublimeMerge 是界面最好看的,同时快捷键和 SublimeText 一样多也好用的工具
林德熙
2019/06/15
1.2K0
Golang Dep 依赖冲突处理
对于 Golang 应用内存堆栈的监控,基本都是读取 runtime.MemStats,然后发往一些 TSDB 进行可视化展示。代码一般都是这样的:
poslua
2019/08/19
1.3K0
git 通过 SublimeMerge 处理冲突
在使用 Git 的时候,如果是多个小伙伴开发,那么如果同时修改一个文件将出现冲突。也就是在自动合并的时候不知道使用哪个代码才对,此时就需要合并工具的协助。我找了很久发现 SublimeMerge 是界面最好看的,同时快捷键和 SublimeText 一样多也好用的工具
林德熙
2022/08/04
4690
逻辑删除与联合索引冲突处理(二)
一星陨落,黯淡不了星空灿烂;一花凋零,荒芜不了整个春天。——巴尔扎克 之前写过一篇,用时间实现,今天提供另一种思路 我们的逻辑删除字段,如果和联合唯一索引同时使用,还可以使用下面这一种方式: 如果未删除,使用魔法值 如果已删除,使用NULL 因为mybatisPlus官方文档也提到了: 字段类型支持说明: 支持所有数据类型(推荐使用 Integer,Boolean,LocalDateTime) 如果数据库字段使用datetime,逻辑未删除值和已删除值支持配置为字符串null,另一个值支持配置
阿超
2022/08/17
4840
逻辑删除与联合索引冲突处理(二)
浅谈NPM怎样处理处理依赖和冲突
其实我们都知道早期版本的的 npm (v2) 管理模块依赖的方式并不复杂。它读取每个模块的依赖列表,并下载匹配版本的依赖模块到该模块目录内的 node_modules 文件夹下;如果该依赖又依赖了其他的模块,会继续下载该依赖的依赖到该模块目录的 node_modules 文件夹下——如此递归执行下去,最终形成一颗庞大的依赖树。
前端老道
2022/03/28
3.9K0
对Bitmap的内存优化
在Android应用里,最耗费内存的就是图片资源。而且在Android系统中,读取位图Bitmap时,分给虚拟机中的图片的堆栈大小只有8M,如果超出了,就会出现OutOfMemory异常。所以,对于图片的内存优化,是Android应用开发中比较重要的内容。 1) 要及时回收Bitmap的内存 Bitmap类有一个方法recycle(),从方法名可以看出意思是回收。这里就有疑问了,Android系统有自己的垃圾回收机制,可以不定期的回收掉不使用的内存空间,当然也包括Bitmap的空间。那为什么还需要这个
xiangzhihong
2018/01/30
1.4K0
结构体的大小与内存对其
最近在群里看到了有人问起结构体的大小问题,好多人的都不太明白。因此写篇文章总结一下。顺便再提一下结构体本身。
zy010101
2019/05/25
7810
处理视觉冲突 | 手势导航 (二)
我们将在近期为大家带来一个关于 "手势导航" 的系列连载,本文是连载的第二篇,如果您希望了解其他手势导航的话题,请持续关注我们。
Android 开发者
2019/11/29
2.8K0
Redis字典的实现方式和冲突处理
Redis的哈希表是一个数组,数组的每个元素都是一个指向哈希表节点的指针。每个哈希表节点包含一个键和值的对,同时还有指向下一个节点的指针,从而形成一个链表。
一凡sir
2023/09/16
3330
Redis字典的实现方式和冲突处理
insert into...on duplicate key冲突处理
这两天工作和生活上的事情都比较多,工作上要赶好几个OKR任务,搞得节奏有点乱,生活上这几天搬了新家,每天回家都自己做饭吃,再加上打扫房间的卫生,稍微搞一搞就九点十点了,时间变的很紧。今天写文章的时间又比较晚了,就写点简单的内容吧。
AsiaYe
2020/06/11
1.6K0
View的滑动冲突的分析和处理实践
文中有用到 Scroller 来实现弹性滑动,不了解的可以先看下 View的滑动实现方式。
103style
2022/12/19
5170
View的滑动冲突的分析和处理实践
如何处理工作与生活之间的冲突?
移动互联网让我们随时随地”在线“,工作时间与生活时间越来越模糊。尤其是程序员这类随时可能都需要解决线上问题的工作。
石云升
2022/08/25
3320
【精简版】git分支融合与冲突处理
其他可能用上的命令: 撤销merge状态: git merge --abort
devi
2021/08/19
1.3K0

相似问题

内存库向量处理器中内存访问冲突的条件

13

内存访问冲突

33

处理任务中的libvlcsharp对象的内存访问冲突

16

未处理的异常错误,内存冲突

21

SIGSEGV内存访问冲突

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