js的window.onscroll事件兼容各大浏览器
为窗口添加滚动条事件其实非常的简单,
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>
<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>
js的window.onscroll事件兼容各大浏览器的更多相关文章
- JS无缝文字滚动(兼容各大浏览器)
<style>*{margin:0px;padding:0px;border:0px;}body{font-size:12px}#demo1{height:auto;text-align: ...
- JavaScript 兼容各大浏览器阻止冒泡事件
JavaScript 兼容各大浏览器阻止冒泡事件 function stopEvent(event) { //阻止冒泡事件 //取消事件冒泡 var e = arguments.callee.call ...
- 阻止a标签跳转四种方法 兼容各大浏览器(包括IE)
阻止a标签跳转四种方法 兼容各大浏览器(包括IE) HTML <!--第一种--> <a href="javascript:;">我不会被跳转</a& ...
- ☆☆☆☆☆Placeholder兼容各大浏览器的例子☆☆☆☆☆
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法
1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 原生js绑定和解绑事件,兼容IE,FF,chrome
主要是最近项目中用到了原生的js 解绑和绑定 事件 然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了. 需求:当鼠标移上去以后,给Select加载元素,接着解 ...
- 【js】window.onscroll 无效问题
body 设置为height:100% 导致window.onscroll 无效
- 简单实现兼容各大浏览器的js复制内容到剪切板
因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...
- 文本框的onchange事件,如何兼容各大浏览器
在项目中经常会遇到对用户输入的数据进行实时校验,而不是等文本框失去焦点或用户手动点击校验. 首先分析下在哪些情况下文本框会产生change事件. 1.用户通过键盘入正常字符时: 2.用户通过键盘输入非 ...
随机推荐
- 【TCP】拥塞控制
TCP拥塞控制 出现拥塞 ∑对资源的需求 > ∑可用资源 拥塞控制是防止过多的数据注入到网络中,使网络中的路由器或链路不过载,这是一个全局性的. 流量控制是点对点的通信量的控 ...
- nacos 1.1.x 集群部署笔记
Nacos 是什么? https://nacos.io/zh-cn/docs/what-is-nacos.html 服务(Service)是 Nacos 世界的一等公民.Nacos 支持几乎所有主流类 ...
- LNMP安装与配置之MySQL
MySQL 是最流行的关系型数据库管理系统之一,今天的安装是在CentOS7环境下进行安装,安装的版本是MySQL5.7,有需要别的版本可点击 官网. 一.安装 1.配置YUM源 # 下载mysql ...
- Rails 用Webpack安装Bootstrap(附录webpack使用)
Rails6将默认使用webpack代替asset: 本文讲述如何自己配置. 参考: https://getbootstrap.com/docs/4.1/getting-started/webpack ...
- Mybatis 解决问题的记录与博客
问题:mybatis 空值映射的问题Mybatis在使用resultMap来映射查询结果中的列,如果查询结果中包含空值的列(不是null),则Mybatis在映射的时候,不会映射这个字段 https: ...
- HDU 6043 - KazaQ's Socks | 2017 Multi-University Training Contest 1
/* HDU 6043 - KazaQ's Socks [ 找规律 ] | 2017 Multi-University Training Contest 1 题意: 一共 n 双袜子编号 1~n,每天 ...
- 归类常用控件GroupBox、TabControl、Expander
<StackPanel Orientation="Horizontal"> <GroupBox Header="颜色" Margin=&quo ...
- XML -- XML基础知识
1.XML的结构 XML的结构采用的是树结构,树结构就是一种一对多的关系结构. XML必定有一个根节点.因为,在解析这个XML时,需要有个起始位置进行遍历解析,这个跟节点就是起始位置. 2.XML的元 ...
- 牛客网 Wannafly挑战赛3 B.遇见
遇见 时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 65536K,其他语言131072K64bit IO Format: %lld 题目描述 A和B在同一条路上,他们之间的距离为 k ...
- 关于MapReduce的测试
题目:数据清洗以及结果展示 要求: Result文件数据说明: Ip:106.39.41.166,(城市) Date:10/Nov/2016:00:01:02 +0800,(日期) Day:10,(天 ...