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 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 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在各种web服务器的运行模式详解
2013/06/03 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
javascript Array.remove() 数组删除
2009/08/06 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
Python3标准库总结
2019/02/19 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
Python之字典对象的几种创建方法
2020/09/30 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
领导班子三严三实心得体会
2014/10/13 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书