<html>

<head>

  <style>

   *{margin:0px;padding:0px;}

   #box{width:200px;height:500px;position:fixed;top:50px;left:200px;border:1px solid #000; overflow:hidden; }

   #box2{position:absolute;left:0px;top:0px;width:200px;height:720px;border:1px solid #000;}

  </style>

</head>

<body>

   <div id="box">

   	  <div id="box2">

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	1<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  	2<br>

   	  </div>

   </div>

  <script>

      var box2=document.getElementById("box2");

      var box=document.getElementById("box");

      //非火狐

      var scrollFn=function(e){

      	var e=e||window.event;

      	var down=true;

      	down=e.wheelDelta?e.wheelDelta<0:e.detail>0;

      	if(down){ //不管ff还是其他浏览器，确定方向向下

      	  if(box2.offsetTop<0){

          box2.style.top=box2.offsetTop+10+"px";

              }else{  box2.style.top=0+"px";}

        }else{   //方向向上

        	if(box.offsetTop-box2.offsetTop<220){

          box2.style.top=box2.offsetTop-10+"px";

               }else{

                      box2.style.top=-220+"px";

               }

          }

      	}

     //为指定dom对象指定事件响应类型并绑定函数

      function addEvent(obj,xEvent,fn) {

        if(obj.attachEvent){

            obj.attachEvent('on'+xEvent,fn);

        }else{

            obj.addEventListener(xEvent,fn,false);

        }

    }

      addEvent(box,'mousewheel',scrollFn);

      addEvent(box,'DOMMouseScroll',scrollFn); //兼容火狐语句

  </script>

</body>

</html>

Js特效--模仿滚动条（兼容IE8+,FF,Google）的更多相关文章

  1. js跨域传值,兼容ie8以上

    js跨域传值,兼容ie8以上 事先说明,此方法并不支持ie8,如果想要支持ie8的话,需要用这种思路(来自微软): if (window.addEventListener) { window.addE ...

  2. 网站图片增强JS插件2.0(兼容IE&FF)

    网站图片增强JS插件2.0简单介绍:插件可以增强网站互动能力与外链建设,用户在欣赏图片的同时,把看好的图片直接制作成自己喜欢的样式后通过QQ等传播,增强外链建设,通过用户互动创造外链.(支持:放大缩小 ...

  3. 界面渐变特效 -- CSS实现 -- 兼容IE8

    特别注意:里面的RGB颜色值必须要全写,不能使用缩写.左右:background: -webkit-gradient(linear, 0 0, 0 100%, from(#80c1e7), to(#2 ...

  4. js 时间格式化 （兼容safari）

    js 时间格式化,兼容IE8和safari浏览器. function formatDate(date, fmt, near, type) { var dateStr = date; if (!date ...

  5. DIV+CSS IE6/IE7/IE8/FF兼容问题汇总

    1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-comp ...

  6. 用JS或jQuery访问页面内的iframe,兼容IE/FF

    用JS或jQuery访问页面内的iframe,兼容IE/FF js或者jQuery访问页面中的框架也就是iframe.注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.htm ...

  7. [转载]使用兼容ie6 ie7 ie8 FF的text-overflow:ellips

    使用兼容ie6 ie7 ie8 FF的text-overflow:ellipsis超出文本显示省略号来代替截取函数更有利于seo,如果使用截取函数,源代码中的标题是显示不完整的,即便是在title属性 ...

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

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

  9. js插件实现点击复制内容到粘贴板，兼容IE8

    先来看下本次需要导入的文件: 第一个是jquery.js,这个不多说: 第二个是jquery.zclip.js,第三个是zeroClipboard.swf ,这两个文件的下载链接:http://www ...

随机推荐

  1. Understanding Execution Governors and Limits

    在编写Salesforce后台代码的时候,如果数据量比较大,或者需要与数据库的交互比较频繁的话,那么会抛出一些限制的异常,来提示你让你做进一步的修改. 有这些限制实质上是跟Salesforce是一个云 ...

  2. aChartEngine图表显示（一页显示多张图表）

    在看本篇的时候,请确认已经看过了 某android平板项目开发笔记----aChartEngine图表显示(1) 不然,有些地方这里就不再说明… 关于XYMutilpleSeriesDataset 一 ...

  3. POJ 1182 食物链 （经典带权并查集）

    第三次复习了,最经典的并查集 题意:动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们 ...

  4. loadrunner中lr_save_searched_string函数的使用

    控制abc后面的第几个字符: 控制字符长度: 总结: 实际应用: Action() { int i =0,j=0; char *tt_url = lr_eval_string("{tt_ur ...

  5. C#开发微信公众平台-就这么简单（附Demo）（转）

    原文:http://www.cnblogs.com/xishuai/p/3625859.html 写在前面 阅读目录: 服务号和订阅号 URL配置 创建菜单 查询.删除菜单 接受消息 发送消息(图文. ...

  6. 最近点对问题 POJ 3714 Raid && HDOJ 1007 Quoit Design

    题意:有n个点,问其中某一对点的距离最小是多少 分析:分治法解决问题:先按照x坐标排序,求解(left, mid)和(mid+1, right)范围的最小值,然后类似区间合并,分离mid左右的点也求最 ...

  7. 注册事件处理程序onclick和addEventListener、attachEvent

    一.设置HTML标签属性为事件处理程序(注意和下面的设置javascript对象属性为事件处理程序是不同的) 用于设置文档元素事件处理程序属性也能化成对应的HTML标签的属性.如果这样做,属性值应该是 ...

  8. Eclipse中使用maven构建web项目中遇到的问题

    构建过程参考: http://blog.csdn.net/smilevt/article/details/8215558/ http://www.cnblogs.com/dcba1112/archiv ...

  9. Codeforces 653D Delivery Bears（最大流）

    题目大概说有一张n个点m条边的简单有向图,每条边只能允许一定总量的货物通过.要让x只熊从1点到n点运送货物,每只熊都要运送且运送的货物重量都一样,求该重量的最大值. 二分重量判断是否成立. 如果已知重 ...

  10. Poj1852

    题目求的是:所有蚂蚁用最短时间从木棍上走下来的最大值(也就是最后一个蚂蚁什么时候走下来的) 所有蚂蚁中,用时最长的情况 PS:根本不用考虑两只蚂蚁相遇又折返的情况(可以直接认为是他两互不影响的走) # ...