javascript滚轮控制模拟滚动条


Posted in Javascript onOctober 19, 2016

此实例通过对滚轮事件的监听,通过滚轮控制滚动条的上下移动,可以将其修改后运用与使用滚轮缩放图片、改变透明度等特效。

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title></title> 
  <style type="text/css"> 
   *{ 
    margin: 0; 
    padding: 0; 
   } 
   #boxwrap{ 
    position: relative; 
    width: 15px; 
    height: 500px; 
    margin: 50px auto; 
    box-sizing: border-box; 
    border: 1px solid gainsboro; 
    border-radius: 6px; 
   } 
   #box{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 13px; 
    height: 30px; 
    background: gray; 
    border-radius: 6px; 
   } 
  </style> 
  <script type="text/javascript"> 
   window.onload = function (){ 
    var boxwrp = document.getElementById('boxwrap'); 
    var box = document.getElementById('box'); 
    //兼容firefox 
    if(boxwrp.addEventListener){ 
     document.addEventListener("DOMMouseScroll", fn, false); 
    } 
    document.onmousewheel = fn;//兼容IE、chrome 
     
    function fn(ev){ 
     var ev = ev||event; 
     var bool = false; 
     //IE、chrome 向上:120,向下:-120 
     if(ev.wheelDelta){ 
      bool= ev.wheelDelta > 0? true : false; 
     } 
     //firefox 向上:-3,向下:3 
     else{ 
      bool= ev.detail < 0? true : false; 
     } 
      
     if(bool){ 
      if(box.offsetTop>=10){ 
       box.style.top = box.offsetTop - 10 + "px"; 
      } 
      else{ 
       box.style.top = 0; 
      } 
       
     } 
     else{ 
      if(box.offsetTop<=boxwrp.offsetHeight-box.offsetHeight-10){ 
       box.style.top = box.offsetTop + 10 + "px"; 
      } 
      else{ 
       box.style.top = boxwrp.offsetHeight - box.offsetHeight + "px"; 
      } 
     } 
    } 
   } 
  </script> 
 </head> 
 <body> 
  <div id="boxwrap"> 
   <div id="box"></div> 
  </div> 
 </body> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
Javascript 继承机制实例
Aug 12 Javascript
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
js展开闭合效果演示代码
Jul 24 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 #Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 #Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 #Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 #Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 #Javascript
使用Angular.js开发的注意事项
Oct 19 #Javascript
js表单登陆验证示例
Oct 19 #Javascript
You might like
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
php实现简易计算器
2020/08/28 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
基于sklearn实现Bagging算法(python)
2019/07/11 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Python datetime包函数简单介绍
2019/08/28 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
物流管理专业求职信
2014/05/29 职场文书
爱护公共设施标语
2014/06/24 职场文书
毕业证明模板
2015/06/19 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
JavaScript函数柯里化
2021/11/07 Javascript
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技