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

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. JavaMaven【一、概述&环境搭建】

    课程概述 JavaMaven[一.概述&环境搭建] JavaMaven[二.目录结构&HelloMaven] JavaMaven[三.常用指令] JavaMaven[四.坐标& ...

  2. 怎么处理U盘无法正常弹出的情况？

    我们都知道U盘和移动硬盘在使用完毕后需要点击“安全删除硬件并弹出”后才能拔出,这样可以避免U盘还在工作时被拔出而造成的故障. 但有时我们点击“安全删除硬件并弹出”时,系统会提示U盘正在工作,没有办法停 ...

  3. 如果在docker中部署tomcat,并且部署java应用程序

    1.先说如何在docker中部署tomcat 第一步:root用户登录在系统根目录下创建文件夹tomcat7,命令如:mkdir tomcat7,并且切换到该目录下:cd tomcat7: 第二步:创 ...

  4. python异常：常见异常、处理、断言、自定义异常

    一.异常是什么 二.常见异常 三.异常处理 四.不太常用语法 五.主动判处异常 六.断言 七.使用场景 八.自定义异常类型 一.异常是什么 """ 什么是异常? 异常是错 ...

  5. 执行sudo pip3 ...报错 Traceback (most recent call last): File "/usr/bin/pip3", line 9, in <module> from pip import main ImportError: cannot import name 'main'

    对于普通pip,把pip3改成pip即可,其他的修改一样 1.执行命令 sudo gedit /usr/bin/pip3 2.改成下面的形式 from pip import __main__ # 需要 ...

  6. 小程序UI设计（9）-文字排版

    小程序中一般很少大段落的文字,基本是4.5个字的主题.一行标题.一行摘要.两行描述.显示时超出部分用省略号代替.下面结合工具使用介绍一下文字排版的方法.先看效果图.  工具中属性设置如下图:两行文字属 ...

  7. java 多线程，线程安全等定义

    线程安全, synchronized的使用,保证方法或代码块操作的原子性.可见性和有序性 参考这篇文章: 7张图带你轻松理解Java 线程安全 public class ThreadDemo { pr ...

  8. Java io 理解

    任何程序都有io部分,io是对程序来说数据流的输入和输出.这里说的流,是指有字节组成的列,不断输入程序,或者从程序中输出,我们形象称为流.Java的io流有两种,一种叫字节流,最原始的:一种叫字符流. ...

  9. 回调函数c++类中实现

    https://blog.csdn.net/mrailence/article/details/52251201 https://blog.csdn.net/qq_14820081/article/d ...

  10. Oracle之：Function ：getcurrdate()

    getdate()函数连接请戳这里 create or replace function getcurrdate(i_date date) return date is v_date date; v_ ...