scrollTop的兼容性
各浏览器下 scrollTop的差异
IE6/7/8:
对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ;
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop;
Safari:
safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ;
Firefox:
火狐等等相对标准些的浏览器就省心多了,直接用 document.documentElement.scrollTop ;
兼容写法
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
注意:
$('body').scrollTop()在chrome正确,火狐无效为0,
$(window).scrollTop(),$(document).scrollTop()兼容火狐 JQ滚动动画兼容
$('html,body').animate({
'scrollTop': scrollTop
}, timeInterval)
scrollTop的兼容性的更多相关文章
- scroll事件的优化以及scrollTop的兼容性
scrollTop的兼容性 scroll事件,当用户滚动带滚动条的元素中的内容时,在该元素上面触发.<body>元素中包含所加载页面的滚动条. 虽然scroll事件是在window对象上发 ...
- 浏览器 窗口 scrollTop 的兼容性问题
window.pageYOffset 被所有浏览器支持除了 IE 6, IE 7, IE 8, 不关doctype的事, 注IE9 开始支持此属性. window.scrollY 被Firefox, ...
- onsrcoll和scrollTop兼容与实现
对于onscroll事件的支持 各浏览器 document.document.body.document.documentElement 对象的 onscroll 事件的支持存在差异. 所谓的支持性存 ...
- 怎么得到scrollTop
我们学习一个事件 : 页面滚动效果 window.onscroll = function() { 页面滚动语句 } 谷歌浏览器 和没有声明 DTD <DOCTYPE > : ...
- JavaScript中尺寸、坐标
测试环境是IE8,Chrome38,Firefox40,下面是全局通用脚本打印代码 /** * 打印 */ function write(str) { document.write(str + '&l ...
- JS原生第七篇 (帅哥)
1.1 复习 offset 自己的 偏移 offsetWidth 得到自己的宽度 offsetHeight 构成 : width + padding + border div ...
- js 获取元素在页面上的偏移量的最佳方式
使用js制作效果时,我们常常要获取某个元素在页面上的偏移量(例如tip提示框功能).而获取偏移量可以直接获取相对于document的偏移量,也可以获取相对与视口的偏移量(viewpoint)加上页面滚 ...
- Top值
业务开发中经常会用到元素或者浏览器窗口的各种top值,最近开发组件的过程中也遇到各种问题,因此决定好好总结一下. 常见的top值 scrollTop Element.scrollTop 属性可以获取或 ...
- Javascript中与Scroll有关的方法
这块确实太乱了,被兼容搞的简直快要晕死,默默地总结下... 与scroll相关的方法 4个window对象下:scrollX.scrollY.scrollTo.scroll(作用和scrollTo一样 ...
随机推荐
- 《Linux命令行与shell脚本编程大全》第十四章 处理用户输入
有时还会需要脚本能够与使用者交互.bash shell提供了一些不同的方法来从用户处获得数据, 包括命令行参数,命令行选项,以及直接从键盘读取输入的能力. 14.1 命令行参数 就是添加在命令后的数据 ...
- android堆栈调试--详细
1.将ndk中的arm-linux-androideabi-addr2line可执行文件的路径加入配置文件~/.bashrc中,例如: export PATH=$PATH:~/dlna/android ...
- Jenkins与网站代码上线解决方案
1.1 前言 Jenkins是一个用Java编写的开源的持续集成工具.在与Oracle发生争执后,项目从Hudson项目独立. Jenkins提供了软件开发的持续集成服务.它运行在Servlet容器中 ...
- jsp运行原理及运行过程
JSP的执行过程主要可以分为以下几点: 1)客户端发出请求. 2)Web容器将JSP转译成Servlet源代码. 3)Web容器将产生的源代码进行编译. 4)Web容器加载编译后的代码并执行. 5)把 ...
- javascript 复制数组
常用复制数组的几种方法 直接arr1 = arr2 这种方法复制的是原数组的引用,修改复制出来的新数组会改变原来数组的内容 var arr = [1, 2, 3, 6]; var arr_ = arr ...
- C++PRIMER 阅读笔记 第三章
本章主要介绍 string vector 和 bitset, 不能贪多,现在本文主要介绍 string 与 vector 头文件中最好不要使用namespace std, 因为头文件会直接被预处理器放 ...
- PHP面向对象-----魔术方法
PHP面向对象-----魔术方法 __get($name)--触发时机:当调用一个不访问的成员属性的时候,会自动触发,可以利用这个方法来完成对不可调用的属性进行调用,但是不能设置值 ___set($n ...
- js 深拷贝和浅拷贝
js 深拷贝和浅拷贝 先举一下项目中遇到的两个例子: 例子1: var json = $.parseJSON(data.data);//data.data是接口返回的值var a = json.cha ...
- node-koa搭建MVC/RESTful API项目
本文将介绍如何基于node-koa搭建一个完整的mvc及restAPI的项目,项目封装了路由.模板引擎. 静态文件加载等基本功能:首先介绍项目的安装启动及目录结构说明,然后通过一个简单的登录页说明mv ...
- Chrome浏览器调试技巧
本文主要讲解针对chrome浏览器的调试方案,对于其他浏览器其实大同小异. 先来入门一点的 DOM元素调试 看上图: 以上图表明的1,2,3,4,5标记说明: 1,为移动设备模拟器,chorme现在是 ...