编程 Javascript

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滚轮控制模拟滚动条

- Author -

张飞翔

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Jquery下attr和removeAttr的使用方法

Dec 28 Javascript

js获取class的所有元素

Mar 28 Javascript

图片img的src不变让浏览器重新加载实现方法

Mar 29 Javascript

jQuery对象的selector属性用法实例

Dec 27 Javascript

jQuery自定义动画函数实例详解(附demo源码)

Dec 10 Javascript

Treegrid的动态加载实例代码

Apr 29 Javascript

通过JS和PHP两种方法判断用户请求时使用的浏览器类型

Sep 01 Javascript

JS中数组重排序方法

Nov 11 Javascript

VUE多层路由嵌套实现代码

May 15 Javascript

Vue源码探究之状态初始化

Nov 14 Javascript

JavaScript实现轮播图效果代码实例

Sep 28 Javascript

ES6 Symbol在对象中的作用实例分析

Jun 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