js的window.onscroll事件兼容各大浏览器!
来源:互联网 发布:画原型的软件 编辑:程序博客网 时间:2024/05/01 18:40
为窗口添加滚动条事件其实非常的简单,
window.onscroll=function(){};
注意在获取滚动条距离的时候
谷歌不识别document.documentElement.scrollTop,必须要加上document.body.scrollTop;即
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
这样才能兼容各个浏览器!
代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>自学php网</title>
<style type=
"text/css"
>
#box{ height:50px; width:200px; background:#666; position:absolute; left:0px; top:0px;}
</style>
</head>
<body style=
"height:9000px;"
>
<div id=
"box"
></div>
<script language=
"javascript"
>
window.onscroll =
function
(e){
var
e =e || window.event;
var
scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
var
box = document.getElementById(
'box'
);
box.style.top = scrolltop+
'px'
;
//console.log(scrolltop);
}
</script>
</body>
</html>
0 0
- js的window.onscroll事件兼容各大浏览器
- js的window.onscroll事件兼容各大浏览器!
- js的window.onscroll事件兼容各大浏览器!
- window.onscroll兼容浏览器
- 各浏览器对document.body.onscroll,window.onscroll,document.documentElement.onscroll的兼容性
- 【JavaScript】利用滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
- 【JavaScript】利用滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
- 兼容各版本浏览器的关闭事件window.close
- js学习小结(五)2014.5.1(视口,window的onscroll事件,返回顶端特效)
- 兼容各大浏览器的JavaScript阻止事件冒泡代码
- 兼容浏览器的js事件绑定函数
- 兼容各大浏览器的 js数组截取方法
- window.onscroll = function(){}事件
- JS阻止事件冒泡兼容各浏览器
- 各浏览器对 document、document.body、document.documentElement 对象的 onscroll 事件支持情况
- JS键盘事件 兼容浏览器
- js事件浏览器兼容案例
- div随滚动条上下滚动,onscroll事件兼容IE、火狐、谷歌浏览器
- 【Linux C代码分享二】UDP Socket示例程序:使用fgets函数获取屏幕输入
- TCP笔记
- JS如何获取一个未知DIV高度的方法
- 装载和动态链接
- 冠字号查询系统中HBase写入数据性能测试
- js的window.onscroll事件兼容各大浏览器!
- IDA功能简介(2)----流程图功能
- Javascript判断IE6浏览器函数
- c语言中函数memset()用法
- 动态链接
- 第三十三讲项目3-输出1000以内能被3整除且个位数为6的所有整数。
- Inode的理解
- Javascript日期格式化函数性能对比
- 利用网表建立Capture与AltiumDesigner间的无缝连接