兼容各大浏览器 onscrool

为窗口添加滚动条事件其实非常的简单,
window.onscroll=function(){};
注意在获取滚动条距离的时候
谷歌不识别document.documentElement.scrollTop,必须要加上document.body.scrollTop;即
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
这样才能兼容各个浏览器!
<!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>无标题文档</title>
</head>
<body style="height:9000px;">
<script language="javascript">
window.onscroll = function(e){
var e =e || window.event;
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
             console.log(scrolltop);
}
</script>

</body>
</html>

时间: 2024-10-10 23:41:16

兼容各大浏览器 onscrool的相关文章

【js】js访问剪切板(兼容各大浏览器)唯一解决方案ZeroClipboard.swf

需求描述: 通过JS实现将页面中的某个元素的数据复制到剪切板上. 需求分析: 要用JS实现最大的问题就是浏览器的兼容性问题了.而且最大的问题还是浏览器出于安全型的考虑,所以像chrome,Firefox等浏览器都不让访问. 解决方案: 最终的解决方案还是通过flash实现的,在网上搜索(关键字:js access clipboard)了一大堆的相关资料,但是这或许是唯一的解决方案了吧!真没想到,flash还是最终的解决方法.当有一天flash彻底被浏览器给抛弃了我想这又将是一大问题了.但是这个问

☆☆☆☆☆Placeholder兼容各大浏览器的例子☆☆☆☆☆

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Placeholder兼容各大浏览器的例子</title> <script src="jquery-1.8.0.min.js"></script> </head> <body> <form> <div> &

js的window.onscroll事件兼容各大浏览器

为窗口添加滚动条事件其实非常的简单, window.onscroll=function(){}; 注意在获取滚动条距离的时候 谷歌不识别document.documentElement.scrollTop,必须要加上document.body.scrollTop:即 var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; 这样才能兼容各个浏览器! <!DOCTYPE html PUBLIC "-/

文本框的onchange事件,如何兼容各大浏览器

在项目中经常会遇到对用户输入的数据进行实时校验,而不是等文本框失去焦点或用户手动点击校验. 首先分析下在哪些情况下文本框会产生change事件. 1.用户通过键盘入正常字符时: 2.用户通过键盘输入非正常字符时 ctrl+v ctrl+x ctrl+z delete Backspace 等操作时: 3.用户通过鼠标进行粘贴.剪切.撤消等操作时: <body> <input id="text1" type="text"/> <div id

js原生代码编写一个鼠标在页面移动坐标的检测功能,兼容各大浏览器

function mousePosition(e) {     //IE9以上的浏览器获取     if (e.pageX || e.pageY) {         return {             x: e.pageX,             y: e.pageY         };     }     //IE9以下     //IE中document文档实际并不在(0,0)的位置,在它周围有一个小(通常有2px)边框,document.body.clientLeft和docu

JS中完美兼容各大浏览器的scrolltop方法

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; window.pageYOffset (Safari) 被放置在 || 的中间位置. 因为当 数字0 与 undefine 进行 或运算时,系统默认返回最后一个值.即或运算中 0 == undefine ; 当页面滚动条刚好在最顶端,即scrollTop值为 0 时,IE 下 window.pag

Enter回车切换输入焦点方法兼容各大浏览器

做项目时,客户要求能够用enter回车直接切换输入(焦点),当最后一个时候,直接提交信息. 第一想法就是,网上去copy一段代码直接用.但了百度.谷歌找了个遍,找到的代码80%以上都是一样的.有的代码太老,都不能用.有的只有部分浏览器能用.折腾了半小时也没个合适的办法.最后一想,干脆自己动手. 一.思路 每次点击回车的时候,获取当前的焦点位置,然后设置它的下一个元素获取焦点; 二.代码 <script type="text/javascript"> $('input:tex

Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法

<script type="text/javascript"> $('input:text:first').focus(); document.onkeydown = function enterHandler(event) { var inputs = $("input"); //可自行添加其它过滤条件 var browser = navigator.appName ; //浏览器名称 var userAgent = navigator.userAge

简单实现兼容各大浏览器的js复制内容到剪切板

因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.setData,只能支持IE和火狐.360浏览器.搜狗等浏览器,都泪崩.所以,研究了ZeroClipboard,尽量使用js代码写. 使用前先引用三个东西(没有提供上传附件,这里就不提供下载地址了,很常见,大家自己找度娘吧): jquery-1.4.1.min.js    ZeroClipboard.js