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

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

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，比如没有解决浏览器缩放时候的问题。感谢大家的阅读，如有指正的地方欢迎大家指正纠错

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • js滚动条回到顶部的代码

    虽然平滑性处理的不好,但非常适合学习 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="tex

  • 基于JavaScript实现自定义滚动条

    基于JavaScript实现自定义滚动条

    可直接使用的js滚动条,先看看效果图: 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义滚动条</title> </head> <meta http-equiv="Content-Type" content="text/html; chars

  • 原生js封装自定义滚动条

    原生js封装自定义滚动条

    最近有一个关于制作在线音乐播放器的项目,需要使用一个滚动条,但是自带滚动条实在是太丑了,所以就自己琢磨了一下自定义的滚动条. 在网上看原理,说实话没怎么看懂,就趁今天上午上安卓的时候,研究了一下,结果还算是满意吧.然后就包装一个对象. 使用方法很简单,就是自定义一个div,将这个对象导入做参数,new一下就可以.也可以自己定义滚动条的样式,只要自己修改一下样式表就可以 效果图: 代码如下: <!doctype html> <html> <head> <meta c

  • 原生js实现模拟滚动条

    原生js实现模拟滚动条

    当页面中有很多滚动条,它们相互嵌套,很不好看,这时就会模拟滚动条,并给这个滚动条好看的样式,使得页面美观. 模拟滚动条很多时候是去用jquery插件,然后写几行代码就搞定了.不过随着mvvm的快速发展,很多时候都懒得用jquery了,这就是本文的动机,本屌力求用简单的不依赖jquery只依赖mvvm(avalon) api的代码,完成一个简易的滚动条. 要求: 1.鼠标滚轮可以让滚动条工作,界面滚动 2.鼠标可以拖动滚动条并让界面滚动 3.页面resize时,滚动条根据页面尺寸变化,仍然可以工作

  • 判断滚动条到底部的JS代码

    判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容可视区域的高度. scrollHeight为内容可视区域的高度加上溢出(滚动)的距离. 从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight. 废话不多少说,赶紧上代码(兼容不同的浏览器). 复制代码 代码如下: /

  • 原生JavaScript实现滚动条效果

    本文实例讲解原生JavaScript实现滚动条效果的相关代码,分享给大家供大家参考,具体内容如下 原理是对滑动条块进行监听,按下鼠标按键后,监听鼠标移动,然后根据滑动条块移动的百分比算出滚动区域的滚动程度,用marginLeft进行滚动,具体的写在注释里. 整体弄成了一个对象,防止各种乱七八糟的数据污染全局变量.另外,对象内部调用的函数也都写到了对象构造函数的里面,由于对象作用域链的原理,外部无法进行调用,防止不小心在外部调用. <!DOCTYPE html> <html> <

  • JS实现的页面自定义滚动条效果

    JS实现的页面自定义滚动条效果

    本文实例讲述了JS实现的页面自定义滚动条效果.分享给大家供大家参考,具体如下: 这里演示网页上用的滚动条效果,是一个自定义的滚动条代码,除了上下两个箭头以外,滚动条和一般的浏览器基本差不多,鼠标滚轮滚动,滚动条滚动.html结构很简单,mainBox是外层div,content是内容,滚动条div是js动态生成的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-zdy-scroll-style-codes/ 具体代码如下: <!D

  • JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴

    这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊 布局什么的你们自己搞定吧 <div class="slider" id="circle"> <a href=""><img src="img/6p.jpg" alt="" /></a> ` <ul class="circle" > <li on

  • js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 复制代码 代码如下: document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: 代码如下复制代码 复制代码 代码如下: document.documentElement.clientWidth document.documentElement.cli

  • javascript自定义滚动条实现代码

    javascript自定义滚动条实现代码

    在工作中经常会遇到内容会超出固定的一个范围,超出的内容一般会使用到滚动条来滚动显示. 但是用浏览器默认的滚动条经常被产品经理鄙视,可是用css却改变不了滚动条的样式,还好,有万能的js ^_^~~ 网上有各种各样的插件,但最顺手的还是自己写的,还可以一边撸一边当学习,自己动手丰衣足食 (*^__^*) 其中这三个问题深深地困扰我: 1.滚动条高度 2.每次点击向上.向下按钮的时候滚动条应该移动多少距离 3.每拖动1px滚动条,页面需要移动多少? 整个的框架大概是长这样的: 先来看看第一个问题.

随机推荐