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 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
php版微信小店调用api示例代码
2016/11/12 PHP
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python进阶篇之字典操作总结
2016/11/16 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
亿企通软件测试面试题
2012/04/10 面试题
驻村工作先进事迹
2014/08/14 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
学习张林森心得体会
2014/09/10 职场文书
个人四风对照检查材料
2014/09/26 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
2014年环卫工作总结
2014/11/22 职场文书
超市督导岗位职责
2015/04/10 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
golang特有程序结构入门教程
2021/06/02 Python
用php如何解决大文件分片上传问题
2021/07/07 PHP