自定义滚动条实现与原理-优快云博客

本文链接：https://blog.youkuaiyun.com/swallowliyan/article/details/49308119

本文探讨了自定义滚动条的实现过程，包括滚动条的原理、布局设计和JavaScript事件处理。通过计算滑块高度、滚动距离，并处理鼠标拖动和滚轮事件，来达到与设计图匹配的定制效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在页面制作中，开发人员会各种偷懒（我本人就很懒），觉得能用原生的就用原生的，否则会很麻烦。最后还是会被追求美感的设计师抓住不放。经常听到‘怎么没有做成设计图上的样子呢..这个自带的滚动条多丑呀，必须要做成设计图上的样子...”通常这种情况我会先跟设计解释下，原生的怎么怎么好用,尽量说服他们。有时会碰到一些有执念的设计师（身负洪荒之力惹不起），我就只能坐下来嗷嗷的写代码了。

今天先记录一下自定义滚动条的效果。

思考：滚动条的原理。

1、内容可显示区高度：内容的实际高度＝滑块高度：滚动条高度。绿色对应是已知的值，通过这个相等的比例，计算出“滑块高度”。判断是否有滚动条，如滑块的高度〉＝内容可以滚动的最大高度，则隐藏滚动条。给滑块定义一个最小值，如果滑块高度小于最小值，则把最小值赋给滑块。

2、滑块的滚动距离：滑块的最大滚动距离＝内容的滚动距离：内容的最大滚动距离。同样绿色的已知的，通过这个比例，计算出‘文本对应的滚动距离’。

如果写成方法的话，我需要三个参数，添加滚动条的盒子ID、包裹内容的盒子ID、滚动条盒子ID。（其实只要第1个参数就够了，只是我觉得3个js获取会比较方便，还有就是children这个属性不兼容IE7/8，当页面里加这种注释时，在IE7/8中获取出来的东东，就不是你想要的那样了。我也懒得再去写一段代码了。）

首先，把布局搞出来。给要添加自定义滚动条的对象分两部分组成，内容的滚动和滚动条本身部分。

代码如下：

<div id="scrollBox">
 <div id="scrollBar"><span class="cfw-imglist-scroll-m"></span></div>
 <div id="scrollContent">要滚动的信息内容部分。。。。</div>
</div>

再者，就是css的一些要求。大家都知道，只有具备‘‘absolute’属性的元素对会在页面中有“动作”，当然一旦元素有了这个属性，就会出现高、宽度的缺失。

内容需要动，滚动条里滑动也需要动，所以它们的CSS中必须具有absolute属性和width属性。

给他们的父级添加固定高度、溢出隐藏（overflow:hidden;）、相对定位（position:relative;），这些一样不能少。

布局完成了。说说js吧。

1、计算滑块高度，滑块的最大滚动距离、内容最大滚动距离

2、判断是否有滚动条

3、给滑块添加事件

onmousedown时计算出参照定值

onmousemove时计算出TOP值

判断TOP的取值范围：0~~滑块的最大滚动距离

onmouseup时释放事件操作

4、添加滚轮事件

真向下

{

top+=10

判断TOP的取值范围

}

假向上

{

top-=10

判断TOP的取值范围

}

// JavaScript Document

//====================================
//        Use:  给指定对象，添加自定义滚动条效果
//     Author:  LiXiaoyan
// 	  Tel:  30720
//       Date:  2015-10-21
// regulation:  1、参数的顺度为‘添加滚动条对象的ID’、‘滚动信息内容的ID’、‘滚动条的ID’
//				2、html的结构如下
//				<div id='添加滚动条对象'>*****在页面中，星号之间的位置不要加注释。
//                                         添加滚动条对象的盒子必须设置高度。且css中必须包含overflow:hidden;position:relative;
//******************<div id='滚动条'>
//						<滑块的html内容>这部分是滚动滑块。且css中必须包含position:absolute; 
//                  </div>

//					<div id='滚动信息内容'></div>此盒子不设高度，由内容自己撑开。且css中必须包含position:absolute;width:98%;宽度值根据自己的需要来设置大小。
//				</div>

//====================================
function customScrollBar(fixedSizeScrollBox,scrollContent,scrollBar)
{
	var oScrollBox=document.getElementById(fixedSizeScrollBox);//添加自定义滚动条的盒子
	var oScrollBar=document.getElementById(scrollBar)//滚动条盒子
	var oScrollMove=oScrollBar.children[0];//滚动条内的滑块盒子
	var oScrollNr=document.getElementById(scrollContent);//滚动信息内容的包裹盒子。	
	var nMoveSize=(oScrollBox.offsetHeight*oScrollBar.offsetHeight)/oScrollNr.offsetHeight; 
	var nMaxNrDis=oScrollNr.offsetHeight-oScrollBox.offsetHeight;//内容的最大滚动距离	
	var nMaxMoveDis=oScrollBar.offsetHeight-nMoveSize;//滚动条的最大滚动距离
	var top=0;
	//判断是否有滚动条。如有滚动条，则滑块的最小高度是50px
   	if(nMoveSize>=nMaxNrDis)
	{
		oScrollBar.style.visibility='hidden';
	}else if(nMoveSize<50)
		{
			nMoveSize=50;
			oScrollMove.style.height=nMoveSize+'px';
		}else{
			oScrollMove.style.height=nMoveSize+'px';
		}
	//滚动条滑块事件
	addEvent(oScrollMove,'mousedown',function(ev){
		var oEvent=ev||event;
		var disY=oEvent.clientY-oScrollMove.offsetTop;
		addEvent(document,'mousemove',_move);
		addEvent(document,'mouseup',_up);
		function _move(ev)
		{
			var oEvent=ev||event;
			var top=oEvent.clientY-disY;
			computedTop();
		}
		function _up(ev)
		{
			removeEvent(document,'mousemove',_move);
			removeEvent(document,'mouseup',_up);
		}
		oEvent.preventDefault();取消默认事件
	})	
	//添加滚轮事件
	addWheel(oScrollBox,function(down){
			if(down)
			{
				top+=10;
				computedTop();
				
			}else{
				top-=10;
				computedTop();
			}	
	})
	//计算滑动距离值
	function computedTop()
	{
		if(top<0)
		{
			top=0;
		}else if(top>nMaxMoveDis)
		{
			top=nMaxMoveDis;
		}
		oScrollMove.style.top=top+'px';
		oScrollNr.style.top=-top/nMaxMoveDis*nMaxNrDis+'px';			
	}

}