JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome


Posted in Javascript onJanuary 05, 2017

今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色。但是css只能是改变IE浏览器的颜色,而且CSS不能做到改变火狐浏览器的样式和颜色。所以只能是通过JavaScript来实现了。也有插件可以做到。我分享一下我自己使用原生JavaScript实现的思路。先上个图看下效果:

JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

JavaScript实现的思路就是模拟浏览器自身滚动条。我制作的思路是先将整个文档放在一个容器里面,然后通过改变容器里面的div的top值来实现滚动效果布局如下:

<style>
 *{
 margin:0;
 padding:0;
 }
 body{
 overflow:hidden;
 }
 #box{
 float:right;
 top:0;
 right:0;
 width:20px;
 background:#ccc;
 position:relative;
 }
 #drag{
 position: absolute;
 top:0
 left:0;
 width:20px;
 background:green;
 }
 #content{
 position:absolute;
 left: 0;
 }
</style>
<body>
 <div id="box">
 <div id="drag"></div>
 </div>
 <div id="content">
 <div style="background:#ccc;width: 100px;">
  Although many people talk about the super performance of quantum computing, such as one second to complete the current supercomputer computing tasks for several years, but so far did not create a true sense of the quantum computer, one of the very important reason is that, The state of particles used in quantum computation is not stable, and any electromagnetic or physical interference can easily disrupt its work. The state of the Mayola fermion is very stable, which makes it a perfect choice for making quantum computers. Six months ago in the laboratory of Shanghai Jiaotong University, Jia Jinfeng successfully captured it.
  Speaking of the scene, Jia Jinfeng said: "In fact, I started to hear the Mayolana fermions, I think this thing may not be done 20 years out.
  Using a special material preparation method, Jia Jinfeng's research team has grown topological insulators on the superconductors with thickness of 5 nanometers. The topological superconductor materials are prepared and finally the Mayolana fermions are found at the interface of the topological superconductors. The mysterious particles were captured 80 years, but also let Jia Jinfeng more firm with its confidence in the manufacture of quantum computers.
  Speaking of the future of the plan, Jia Jinfeng said: "I hope to within a few years to do the topological quantum bit!" (Before) the world has not, so if we cut into this from the point, we are the same with the world The starting line, for our country, this is able to catch up with the footsteps of quantum computing, a starting point.
 <div>
 </div>
</body>

先定义滑块和滑动条,然后在定义一个装内容的盒子,布局很简单,body的 overflow设置成hidden隐藏默认滚动条。

实现主要思路就是:滑块移动距离/滑块滚动范围=内容滚动距离/内容可滚动高度;滑块移动距离就是鼠标按下后拖动的距离,

内容可滚动高度就是内容总高度减去可视区域高度。另外,滚动条的总高度就是可视区域的高度,滑块的高度=可视区域的高度/内容的总高度*可视区域的高度。最后就是判断浏览器是否是火狐。

<script type="text/javascript">
window.onload=function(){
 var oBox=document.getElementById('box');
 var oDrag=document.getElementById('drag');
 var content=document.getElementById('content');
 var viewHeight=document.documentElement.clientHeight;
 var conHeight=content.clientHeight
 oBox.style.height=viewHeight+'px';
oDrag.style.height=viewHeight/conHeight*viewHeight+'px';
 window.onresize = function(){
 viewHeight=document.documentElement.clientHeight;
 oBox.style.height=viewHeight+'px';
oDrag.style.height=viewHeight/conHeight*viewHeight+'px';
 oDrag.style.top=-content.offsetTop/(content.clientHeight-viewHeight)*(oBox.clientHeight-oDrag.clientHeight)+'px'; 
 }
 oDrag.onmousedown=function (ev){
 //阻止默认事件
 var e=ev||window.event;
 if (e.preventDefault) {
  e.preventDefault();
 } else{
  e.returnValue=false;
 };
  //e.clientY鼠标当前坐标
 var downY=e.clientY-oDrag.offsetTop;
 document.onmousemove=function (ev){
  var e=ev||window.event;
  var top=e.clientY-downY;
  if (top<=0) {
  top=0;
  };
  if (top>=oBox.clientHeight-oDrag.clientHeight) {
  top=oBox.clientHeight-oDrag.clientHeight;
  };
  var scale=top/(oBox.clientHeight-oDrag.clientHeight);
  var contentY=scale*(content.clientHeight-viewHeight);
  oDrag.style.top=top+'px';
  content.style.top=-contentY+'px';
 }
 document.onmouseup=function (){
  document.onmousemove=null;
 }
 }
 var str=window.navigator.userAgent.toLowerCase();
 //火狐浏览器
 if (str.indexOf('firefox')!=-1){
  document.addEventListener('DOMMouseScroll',function (e){
  e.preventDefault();//阻止窗口默认的滚动事件
  if (e.detail<0) {
  var scrollHei=content.offsetTop+25;
  if (scrollHei>=0) {
   scrollHei=0;
  };
  if (scrollHei<=-(content.clientHeight-viewHeight)) {
   scrollHei=-(content.clientHeight-viewHeight);
  };
  var scale=scrollHei/(content.clientHeight-viewHeight);
  var top=scale*(oBox.clientHeight-oDrag.clientHeight);
  content.style.top=scrollHei+'px';
  oDrag.style.top=-top+'px';
  }
  if (e.detail>0) {
  var scrollHei=content.offsetTop-25;
  if (scrollHei>=0) {
   scrollHei=0;
  };
  if (scrollHei<=-(content.clientHeight-viewHeight)) {
   scrollHei=-(content.clientHeight-viewHeight);
  };
  var scale=scrollHei/(content.clientHeight-viewHeight);
  var top=scale*(oBox.clientHeight-oDrag.clientHeight);
  content.style.top=scrollHei+'px';
  oDrag.style.top=-top+'px';
  };
 },false);
 }
 else{//非火狐浏览器
 document.onmousewheel=function (ev){
  var e=ev||window.event;
  if (e.preventDefault) {
  e.preventDefault();
  } else{
  e.returnValue=false;
  };
  if (e.wheelDelta>0) {
  var scrollHei=content.offsetTop+25;
  if (scrollHei>=0) {
   scrollHei=0;
  };
  if (scrollHei<=-(content.clientHeight-viewHeight)) {
   scrollHei=-(content.clientHeight-viewHeight);
  };
  var scale=scrollHei/(content.clientHeight-viewHeight);
  var top=scale*(oBox.clientHeight-oDrag.clientHeight);
  content.style.top=scrollHei+'px';
  oDrag.style.top=-top+'px';
  };
  if (e.wheelDelta<0) {
  var scrollHei=content.offsetTop-25;
  if (scrollHei>=0) {
   scrollHei=0;
  };
  if (scrollHei<=-(content.clientHeight-viewHeight)) {
   scrollHei=-(content.clientHeight-viewHeight);
  };
  var scale=scrollHei/(content.clientHeight-viewHeight);
  var top=scale*(oBox.clientHeight-oDrag.clientHeight);
  content.style.top=scrollHei+'px';
  oDrag.style.top=-top+'px';
  };
 }
 }
}
</script>

以上就是我自己实现的整个过程,其中也存在不少BUG,比如没有解决浏览器缩放时候的问题。感谢大家的阅读,如有指正的地方欢迎大家指正纠错

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
浅析Ajax语法
Dec 05 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 #Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 #Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 #Javascript
bootstrap table配置参数例子
Jan 05 #Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 #Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 #Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 #Javascript
You might like
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
深入PHP数据加密详解
2013/06/18 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
JavaScript登录验证基础教程
2017/11/01 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
github配置使用指南
2014/11/18 Python
Python构造函数及解构函数介绍
2015/02/26 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
周年庆典邀请函范文
2014/01/24 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
《春天来了》教学反思
2014/04/07 职场文书
社团活动总结报告
2014/06/27 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
保密工作整改报告
2014/11/06 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
开学第一周总结
2015/07/16 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python