浏览器的滚动条

导语:

我这个人就是喜欢一些炫酷的东西,今天来打造一个个性的滚动条吧!

首先,老掉牙的 IE 我就不看了,他有一些私有的属性,可以设置滚动条,不过不能设置宽和高,没什么卵用。

webkit 内核的浏览器滚动条定制

在所有浏览器,滚动条可定制性最强的当属 webkit 内核的浏览器了。这些浏览器都属于 webkit 内核:Google Chrome、360 极速浏览器,猎豹浏览器等,搜狗浏览器,UC 浏览器,QQ 浏览器 9.0 以上······

首先介绍一下设置滚动条样式的 css 属性(我只说明我用过的,我没用过的就不说了。有兴趣可以自己查资料)

::-webkit-scrollbar

代表滚动条整体部分,其中的属性有 width,height,background,border(就和一个块级元素一样)等。

::-webkit-scrollbar-thumb

代表滚动条里面可以拖动的那部分

直接上代码:

/*出现滚动条*/
body{
	width: 9000px;
	height: 9000px;
}
/*
* ::-webkit-scrollbar 滚动条整体部分,其中的属性有 width,height,background,border(就和一个块级元素一样)等。
* 这里说一下-webkit-scrollbar 里面的 width 是指的纵向滚动条的宽度,height 是指横向滚动条的高度
*/
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
/*滚动条里面可以拖动的那部分*/
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background:#f90;
}
/*hover 到滚动条上*/
/*这里 vertical 是滚动条的一种伪类,vertical 代表纵向滚动条,horizontal 代表横向滚动条*/
::-webkit-scrollbar-thumb:vertical:hover {
	background: #000;
}
/*鼠标在滚动条上按下的样式*/
::-webkit-scrollbar-thumb:vertical:active{
	background: red;
}
::-webkit-scrollbar-thumb:horizontal:hover{
	background: blue;
}
::-webkit-scrollbar-thumb:horizontal:active{
	background: green;
}
自定义滚动条 demo

模拟滚动条

那如果,需求就是要这种自定义的滚动条,怎么办呢,用原生的话 IE 实在是没办法实现,这时候靠 CSS 是不行滴,我们就自己来模拟一个替代原本的滚动条。

先分析一下模拟滚动条的步骤:

核心点:

1.滚动区域,要是没有滚动区域,那滚动条也只是一个可以拖拽的元素,也不叫滚动条。

2.滚动条,没有滚动条就不叫滚动条了,对不对。

直接上代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模拟滚动条</title>
		<style type="text/css">
			body{
				margin: 0;
				overflow: hidden;
			}
			.con{
				line-height: 100px;
				width:50px;
				position: absolute;
			}
			.srcoll_bar{
				width: 10px;
				min-height: 100px;
				background: red;
				position: fixed;
				right: 0;
				top: 0;
			}
			.blue{
				background: blue;
			}
		</style>
	</head>
	<body>
		<div class="con">
			随便写随便写随便写随便写随便写随便写随便写随便写随便写随便写随便写随便写随便写随便写随便写随便写随便写随便写随便写随便写
		</div>
		<div class="srcoll_bar"></div>
		<script type="text/javascript">
			/*
			 首先获取元素,srcoll_bar 是滚动条的那个滑块
			 con 就是内容了
			 * */
			var srcoll_bar = document.querySelector(".srcoll_bar");
			var con = document.querySelector(".con");
			//滚动条鼠标按下事件
			srcoll_bar.onmousedown = function(ev){
				//类名加 blue,添加一个选中状态
				srcoll_bar.className += " blue";
				//ev 是当前的鼠标对象
				var ev = ev || event;
				//这部分是拖拽的原理
				var disY = ev.clientY - this.offsetTop;
				//鼠标移动事件
				//绑定在 document 上是因为,如果你鼠标移出滚动条,就不起作用了,这和原生的不一样
				//绑定在 document 的话,移出去也可以控制,可以算是事件委托吧。
				document.onmousemove = function(ev){
					var disentY = ev.clientY - disY;
					//限制拖拽的范围,不能小于 0 和大于滚动区域
					if(disentY<0){
						disentY = 0;
					}else if(disentY>document.documentElement.clientHeight - srcoll_bar.offsetHeight){
						disentY = document.documentElement.clientHeight - srcoll_bar.offsetHeight;
					}
					srcoll_bar.style.top = disentY + "px";
					//可视区,也就是滚动区域
					var iMax = document.documentElement.clientHeight;
					//因为是在滚动区域内滚动,而内容也是在滚动区域内查看,那么他们移动的距离之间就存在一个比例
					//滚动条的移动距离和整个滚动区域的比例
					var isCale = disentY / (iMax - srcoll_bar.offsetHeight);
					//那么内容移动的话,是移动可视区之外的内容,这个算出来是个负数。
					//滚动条往下移动,内容往上移动,这样的话 top 就是负值,正好,算出来这段差值*这个比例=该移动的距离;
					con.style.top = (iMax - con.offsetHeight) * isCale + "px";
					//阻止浏览器默认行为,比如选中文字;
					return false;
				}
				//鼠标抬起事件
				document.onmouseup = function(){
					//样式变回原样
					srcoll_bar.className = "srcoll_bar";
					//清空事件函数
					document.onmousemove = document.onmouseup = null;
				}
				//阻止浏览器默认行为,比如选中文字;
				return false;
			}
		</script>
	</body>
</html>

模拟滚动条 demo
然后下面这张图是我画的拖拽原理图,勉强能看,模拟滚动条就是换成 Y 轴了
浏览器的滚动条


a'ゞ『完美』版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明浏览器的滚动条
喜欢 (21)
[]
分享 (0)
a'ゞ『完美』
关于作者:
一个前端小白菜
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 这个666啊,我也试试去
    纯洁博客2016-06-22 10:37 回复 Windows 10 | Chrome 51.0.2704.103