原生封装自定义滚动条

有时候在开发过程中，为了一些美化效果，往往需要修改浏览器上一些默认的样式或者事件，让整个页面看起来更和谐，舒畅。

比如在开发过程中就遇到修改该浏览器默认滚动条的需求，当然使用CSS的伪元素也可以修改浏览器滚动条的默认样式，但是存在兼容性问题，由于各大浏览器厂商对浏览器的设计略有不同，比如说浏览器内核，再加上浏览器高低版本的兼容，所以实现出来的效果并不尽人意。

下面是针对浏览器纵向滚动条而实现的自定义滚动条。

先分析一下：

既然是滚动条，首先要有一个滚动的限制，即滚动范围
鼠标可以拖动滑块在滚动范围内随意滚动
鼠标拖动滑块过程中，与之相关的内容区域需要做跟随滚动效果

需要用到的事件：

onmousedown
onmousemove
onmouseup

下面是具体的实现代码：

<div id="container">
    <div id="chute">
        <div id="slider"></div>
    </div>
    <div id="content">
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
        <p>这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。这里是测试文本。</p>
    </div>
</div>

#chute {
	width: 15px;
	height: 300px;
	background: #CCC;
	position: absolute;
	top:0;
	right:0;
	z-index: 999;
}

#slider {
	width:15px;
	height:40px;
	background:red;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 10px;
	cursor: pointer;
}

#container {
	width: 400px;
	height: 300px;
	border: 1px solid black;
	position: relative;
	overflow: hidden;
}

#content {
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px 30px 10px 10px;
	text-indent:32px;
}

;(function () {
	/**
	 * 初始化参数
	 * @param {Object} container  	String	盒子
	 * @param {Object} content		String	内容
	 * @param {Object} slider		String	滑块
	 * @param {Object} chute		String	滑条
	 */
	var CustomSlider = function (container,content,slider,chute) {
		//参数配置
		this.config = {
			container: document.getElementById(container),
			  content: document.getElementById(content),
			   slider: document.getElementById(slider),
			    chute: document.getElementById(chute),
			     disY: 0
		}
		//注册事件
		this.addEvent();
	}
	//原型共享
	CustomSlider.prototype = {
		//注册事件
		addEvent: function () {
			var _this = this;
			//鼠标按下响应事件
			_this.config.slider.onmousedown = function (ev) {
				var mouseEvent = ev || event;
				//计算鼠标到滑块边缘的Y轴坐标距离
				_this.config.disY = mouseEvent.clientY - _this.config.chute.offsetTop;
				//鼠标拖动响应事件
				document.onmousemove = function (ev) {
					var mouseEvent = ev || event;
					//计算滑块滑动距离
					var sliderTop = mouseEvent.clientY - _this.config.disY;
					//计算滑块最大滑动距离
					var maxTop = _this.config.chute.offsetHeight - _this.config.slider.offsetHeight;
					//判断滑块Y轴滑动上限
					sliderTop = sliderTop < 0 ? 0 : sliderTop;
					//判断滑块Y轴滑动下限
					sliderTop = sliderTop > maxTop ? maxTop : sliderTop;
					//设定滑块滑动Y轴位置
					_this.config.slider.style.top = sliderTop + 'px';
					//计算滑块与滑槽的比值
					var scale = sliderTop / maxTop;
					//设置内容区域的跟随滑动位置
					_this.config.content.style.top = -1 * scale * (_this.config.content.offsetHeight - _this.config.container.offsetHeight) + 'px';
				};
				//注册鼠标弹起事件
				document.onmouseup = _this.mouseUp;
				//阻止默认事件
				return false;
			};
		},
		//鼠标弹起响应事件
		mouseUp: function (ev) {
			//注销事件绑定
			document.onmousemove = null;
			document.onmouseup = null;
		}
	}
	window.CustomSlider = CustomSlider;
})()

调用方法：

var slider = new CustomSlider('container','content','slider','chute');

原生封装自定义滚动条

原生封装自定义滚动条

猜你喜欢