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 相关文章推荐
javascript options属性集合操作代码
Dec 28 Javascript
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
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文件大小格式化函数合集
2014/03/10 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
javascript读取RSS数据
2007/01/20 Javascript
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
python+mysql实现简单的web程序
2014/09/11 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
快速了解Python相对导入
2018/01/12 Python
Puppeteer使用示例详解
2019/06/20 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
详解rem 适配布局
2018/10/31 HTML / CSS
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
造型师求职自荐信
2013/09/27 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
送餐员岗位职责范本
2014/02/21 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL