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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
通过隐藏option实现select的联动效果
Nov 10 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
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/01/27 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
解析Python中的异常处理
2015/04/28 Python
Python实现简单多线程任务队列
2016/02/27 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
美国玩具公司:U.S.Toy
2018/05/19 全球购物
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
中专毕业生的自我鉴定
2013/12/01 职场文书
工作交流会欢迎词
2014/01/12 职场文书
二年级评语大全
2014/04/23 职场文书
英语感谢信范文
2015/01/20 职场文书
初中英语教学随笔
2015/08/15 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
Redis过期数据是否会被立马删除
2022/07/23 Redis