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

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. Visual Studio 添加 自定义 路径宏

    在编辑VS工程包含路径和库路径时,有时需要添加第三方包的路径,比如c++ boost库, 为了协作的方便,不合适直接把本地绝对路径添加入工程设置,此时可以添加自定义路径宏, 然后参与协作的每个开发人员 ...

  2. （七）make menuconfig

    1.make menuconfig进入图形界面后,输入 / 进行查找页面,如果输入有错,要删除前面输入的可以输入 ctrl加<--键(ctrl加回退按键)

  3. 接口测试工具中 post请求如何传递多维数组

    1,请求参数为数组时,可以采用传递 json格式的形式传递请求参数(字段及字段对应的值如查是字符,都应该用双引号括起来.用单引号会无法识别),后台接收的数据为json . 2,直接以数组格式来请请求 ...

  4. [Suricata]无法禁用某些规则的解决办法

    背景: 生产环境中部署了suricata,日常规则更新使用suricata-update,如果想禁用某些规则,可以在配置文件/etc/suricata/disable.conf中添加,比如: #禁用规 ...

  5. linux抓取usb包设置usbmon

  6. golang-vue实现微信小程序分享到朋友圈

    最近涉及到微信小程序分享到朋友圈,不知道微信为什么不直接接口分享,咱也不敢佛,咱也不敢问,只能百度问度娘,看官方文档,网上的一些分享五花八门,每一个重点的,所以整理了一下到底怎样生成二维码分享图片才是 ...

  7. 部署NFS共享

    一:NFS工作原理 什么是NFS服务器 NFS就是Network File System的缩写,它最大的功能就是可以通过网络,让不同的机器.不同的操作系统可以共享彼此的文件. NFS服务器可以让PC将 ...

  8. 3 监控项、触发器、web监控、nginx监控

    1.自定义监控项 Item 参数文档 https://www.zabbix.com/documentation/3.0/manual/config/items/itemtypes/zabbix_age ...

  9. 【Weblogic】-weblogic查看版本及升级

    一.查看weblogic版本 1. cd /weblogic/bea/wlserver_10.3/server/lib 2. java -cp weblogic.jar weblogic.versio ...

  10. css实现翻面效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...