为窗口添加滚动条事件其实非常的简单，

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事件兼容各大浏览器的更多相关文章

  1. JS无缝文字滚动（兼容各大浏览器）

    <style>*{margin:0px;padding:0px;border:0px;}body{font-size:12px}#demo1{height:auto;text-align: ...

  2. JavaScript 兼容各大浏览器阻止冒泡事件

    JavaScript 兼容各大浏览器阻止冒泡事件 function stopEvent(event) { //阻止冒泡事件 //取消事件冒泡 var e = arguments.callee.call ...

  3. 阻止a标签跳转四种方法 兼容各大浏览器(包括IE)

    阻止a标签跳转四种方法 兼容各大浏览器(包括IE) HTML <!--第一种--> <a href="javascript:;">我不会被跳转</a& ...

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

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法

    1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 原生js绑定和解绑事件,兼容IE,FF,chrome

    主要是最近项目中用到了原生的js 解绑和绑定 事件  然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了. 需求:当鼠标移上去以后,给Select加载元素,接着解 ...

  7. 【js】window.onscroll 无效问题

    body 设置为height:100% 导致window.onscroll 无效

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

    因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...

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

    在项目中经常会遇到对用户输入的数据进行实时校验,而不是等文本框失去焦点或用户手动点击校验. 首先分析下在哪些情况下文本框会产生change事件. 1.用户通过键盘入正常字符时: 2.用户通过键盘输入非 ...

随机推荐

  1. Oracle笔记（一） Oracle简介及安装

    一.轨迹 二.Oracle简介 Oracle是现在全世界最大的数据库提供商,编程语言提供商,应用软件提供商,它的地位等价于微软的地位. Oracle在古希腊神话中被称为“神谕”,指的是上帝的宠儿,在中 ...

  2. 基于Linux解决登录ssh客户端失败问题—sshd error: could not load host key

    当你ssh远程登录时,会发现ssh登录界面刚打开就会闪退,在查看主机日志消息中,就会看到如下错误: 然而问题的根源也就是这三个文件,无法正常加载ssh主机密钥. 而我们只需要将有问题的文件删除,然后重 ...

  3. LInux基于nginx与OpenSSL实现https访问

    注意!!首先在nginx安装时添加--with-http_ssl_module模块,否则将会报错,只能从头开始了 自建证书: 通过openssl命令(软件包:openssl :openssl-deve ...

  4. 配置lnmp时出现“file not found？

    问题: 昨天测试并搭建lnmp架构,在测试过程中,挂载好测试环境时在浏览器上测试网站出现“file not found",使用命令curl时也出现”file not found", ...

  5. python学习笔记（三）条件判断和循环

    1.条件判断语句 Python中条件选择语句的关键字为:if .elif .else这三个.其基本形式如下: 1 2 3 4 5 6 7 8 9 age_of_cc = 27   age = int( ...

  6. python+Appium自动化：Appium元素检测

    appium模拟用户的真实操作,如果用户第一次进入app或许会弹出一些更新提示,或者是引导页面,但是下一次开启app时则没有引导页这些界面,这时,脚本中又肯定不考虑用两套代码来进行维护,此时如何应对这 ...

  7. P4294 [WC2008]游览计划 (斯坦纳树)

    题目链接 差不多是斯坦纳树裸题,不过边权化成了点权,这样在合并两棵子树时需要去掉根结点的权值,防止重复. 题目还要求输出解,只要在转移时记录下路径,然后dfs一遍就好了. #include<bi ...

  8. CF888G Xor-MST[最小生成树+01trie]

    前注:关于这题,本人的解法暂时没有成功通过此题,原因是被卡常了.可能需要等待某种机缘来请人调试. 类似uoj的一道题(新年的繁荣),不过是一个有些简单的版本. 因为是完全图,有没有办法明显优化建边,所 ...

  9. 08-sp_who2和inputbuffer的使用，连接数

    一.sp_who2的使用 1.存储过程的位置 sp_who官方解释地址:https://docs.microsoft.com/zh-cn/sql/relational-databases/system ...

  10. 大数据技术之kettle安装使用

    kettle是一款开源的ETL工具,纯java编写,可以在Windows.Linux.Unix上运行,绿色无需安装,数据抽取高效稳定. kettle的两种设计 简述: Transformation(转 ...