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

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. Delphi MSComm控件事件的介绍

  2. ubuntu系统搭建samba服务

    安装samba服务 # apt-get install samba 创建一个samba服务的分享目录 # mkdir /share 创建一个samba服务限制的用户及组 #useradd public ...

  3. Raspberrypi 安装完MySQL之后登录不了（ERROR 1698 (28000)）

    1.问题原因: 出现这是错误是因为 mysql 默认的 root 用户使用了 UNIX auth_socket_plugin 的用户认证方式,我们有下面两种方式处理问题: 修改 root 用户认证方式 ...

  4. IoU-Net论文笔记

    原论文标题:Acquisition of Localization Confidence for Accurate Object Detection 1. 前言 Megvii在ECCV 2018上的一 ...

  5. 寒武纪C++日常实习生面经（其他人面试题）

    1.C++继承方式? 答:public,protected,private三种继承方式和虚继承一共四种. 派生类可以继承定义在基类中的成员,但是派生类的成员函数不一定有权访问从基类继承而来的成员. 派 ...

  6. Jquery实现类似百度的搜索框

    最近工作中需要做一个搜索框,类似百度的搜索框,需要达到两个功能: 1.输入关键字,展示匹配的下拉列表 2.选择匹配的项后查出相关内容 一般电商网站中也经常用到该搜索条,首先分析功能实现,输入关键字马上 ...

  7. cubase 使用冻结功能 节省电脑资源

  8. [APIO2010] 算法竞赛竞赛经典 巡逻

    原题链接 题目描述 在一个地区有 n 个村庄,编号为1,2,-,n. 有 n-1 条道路连接着这些村庄,每条道路刚好连接两个村庄,从任何一个村庄,都可以通过这些道路到达其他任一个村庄. 每条道路的长度 ...

  9. K nearest neighbor cs229

    vectorized code 带来的好处. import numpy as np from sklearn.datasets import fetch_mldata import time impo ...

  10. emplace_back() 和 push_back 的区别

    在引入右值引用,转移构造函数,转移复制运算符之前,通常使用push_back()向容器中加入一个右值元素(临时对象)的时候,首先会调用构造函数构造这个临时对象,然后需要调用拷贝构造函数将这个临时对象放 ...