[BUG]document.body.scrollTop=0不生效(回到顶部)
描述
让body回滚到最顶部,设置 document.body.scrollTop = 0; 。
微信内,安卓设备可以,IOS设备不可以。
原因
MDN中 scrollTop是这样定义的
一个元素的
scrollTop值是这个元素的顶部到视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的scrollTop值为0。
简单来说,scrollTop是这个元素的内容相对于自己向上滚动的高度。
ios设备中没问题,但是安卓设备 body 比较特殊,即使body没有限制高度,body的内容没有相对于自己滚动,也会有 scrollTop 值。
然而如果限制了body高度,让body的内容相对于自己滚动, ios设备中 body.scrollTop 有值, 安卓设备 body.scrollTop 始终为0。
解决方案
不使用body,在body内部设置最大容器root盒子, 然后操作root盒子。
html,
body,
#root {
height: 100%;
}
#root {
overflow: auto;
}
<body>
<div id="root">
<!-- 这里放内容 -->
</div>
</body>
document.getElementById('root').scrollTop = 0;
[BUG]document.body.scrollTop=0不生效(回到顶部)的更多相关文章
- HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现
对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousem ...
- 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...
- document.body.scrollTop 值总为0
http://www.jb51.net/article/21168.htm 页面具有 DTD(或者说指定了 DOCTYPE)时,使用 document.documentElement. 做页面 ...
- document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
转自http://wo13145219.iteye.com/blog/2001598 一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取do ...
- document.body.scrollTop无效的解决方法
1.document.body.scrollTop = 0 有时候不生效,两种解决方案,试试看. 1-1.设置:document.documentElement.scrollTop = 0;1-2.设 ...
- document.body.scrollTop 各浏览器兼容性解决
document.compatMode:获取当前浏览器采用的渲染方式.主要是浏览器的模式,有两个:BackCompat,CSS1Compat.其中前者是怪异模式,后者是标准模式. IE默认是BackC ...
- UEditor图片焦点错位,火狐document.body.scrollTop不管用的问题
转自 http://liyunpeng.iteye.com/blog/2068751 关于 document.body.scrollTop 在火狐浏览器中不管用的问题 看网上有人写通过判断docume ...
- document.documentElement.scrollTop
要获取当前页面的滚动条纵坐标位置, 用: document.documentElement.scrollTop; 而不是: document.body.scrollTop; doc ...
- document.documentElement.scrollTop指定位置失效解决办法
近期在vue的H5项目中,做指定位置定位的时候发现使用document.documentElement.scrollTop一直不生效. 解决办法是document.documentElement.sc ...
随机推荐
- OpenCV 实现自己的线性滤波器
#include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #i ...
- 防止跨站攻击——CSRFToken
怎么防止跨站攻击: 表单:在 Form 表单中添加一个隐藏的的字段,值是 csrf_token. 非表单:在ajax获取数据时,添加headers:{ 'X-CSRFToken':getCookie( ...
- linux有些sh文件,为什么要用 ./ 来执行
因为有环境变量PATH,里面包含了许多目录,这些目录下的可执行文件就无需输入完整路径来执行.你可以用 echo "$PATH"查看当前的环境变量包含的目录,自带的命令文件都是在PA ...
- 公式化学习requests(第一卷)
个人来讲我不是很喜欢REQURST这个第三方模块,一点不好用不如URLLIB,但身为技术人员,模块你可以不用但是你得会,就像生活质量我这个东西我不用但是我得有 先拿百度做个案例: 看下代码 结果为: ...
- [LC] 104. Maximum Depth of Binary Tree
Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...
- vue日常问题总结
1.Vue项目启动后首页URL带的#该怎么去掉? vue-router中默认使用的是hash模式,URL中带有#号,我们可以用如下代码修改成history模式: import Vue from 'vu ...
- SpringMVC学习笔记七:SpringMVC的数据验证
SpringMVC支持JSR(Java Specification Requests, Java规范提案)303-Bean Validation数据验证规范,该规范的实现者很多,其中较常用的是 Hib ...
- HTMLTestRunner测试报告
把测试报告写入文件中,设置报告生成的路径 测试报告名称上添加时间 HTMLTestRunner文件如下,复制即可用,把该文件放在Lib下即可 """ A TestRunn ...
- 环境安装文档(for Ubuntu)
这个文档的目标是:各位小伙伴通过这个文档,可以在一台全新的 Ubuntu 电脑上搭建平常开发使用的环境,主要包含 Node.js, git 和 编辑器部分. 这是针对 Ubuntu 系统的安装文档,W ...
- swift中的闭包总结
闭包是功能性自包含模块,可以在代码中被传递和使用. Swift 中的闭包与 Objective-C中的 blocks 以及其他一些编程语言中的 lambdas 比较相似. 闭包的基本语法 闭包表达式语 ...