自定义滚动条

最新推荐文章于 2022-02-15 09:43:29 发布

magicfly9527

最新推荐文章于 2022-02-15 09:43:29 发布

阅读量902

点赞数

本文链接：https://blog.csdn.net/magicfly9527/article/details/51902941

版权

<pre name="code" class="html">

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>scroll</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="scroll-demo">
	<ul class="scroll-tab">
		<li class="tab-item active">第一篇</li>
		<li class="tab-item">第二篇</li>
		<li class="tab-item">第三篇</li>
		<li class="tab-item">第四篇</li>
	</ul>
	<div class="scroll-wrap">
		<div class="scroll-cont">
			<h3 class="anchor">春天来了</h3>
			<div class="scroll-ol">
				<p>爱春天，我爱春天的风。春天的风犹如一个温柔可爱的小姑娘在空中舞蹈。春天的风不像夏天的风那样炎热无比;不像秋天的风那样清爽宜人;更不像冬天的风那样寒冷刺骨。它是那样温柔可亲。春风吹，吹绿了大树，出开了鲜花，吹生了小草，把温暖带给千万家。</p>

				　　<p>我爱春天，我爱春天的雨。春雨沙沙，犹如一位少女坐着滑梯观光者所有美景从云彩上飘下。春天的雨不像夏天的雨那样倾盆而下，不像秋天的雨那样寒气逼人。春天的雨是绵绵的，是沙沙的。在雨中，我嗅到了大自然的芬芳清新，看到了一个个嫩绿的小芽在雨中成长。春雨沙沙下，洗去空气中所有的灰尘;春雨沙沙下，把清新的空气带给千万家。</p>

				　　<p>我爱春天，我更爱春天的雪。春天的雪是非常罕见的，但是我看到过。春天的雪好似一个个小珍珠。晶莹剔透，丰盛饱满。站在春雪中，就像进入了一个童话世界，树白了，草白了，房子白了。雪花为大地披上了一件银白色的礼服。雪花是那样的纯洁，飘啊飘，飘进我的心里。</p>

				　　<p>我爱春天，我爱它那生机勃勃的精神。春回大地、万物复苏、溪水融化、所有植物都长出新芽。你看，那树上嫩绿的小叶!你看，那草地上嫩绿的小芽!你看，那枝头即将绽放的小花!┅┅这不就是一个个新生命的开始吗?植物离不开春天，动物离不开春天，人类更离不开春天。</p>

				<p>我爱春天，我爱它那生机勃勃的精神。春回大地、万物复苏、溪水融化、所有植物都长出新芽。你看，那树上嫩绿的小叶!你看，那草地上嫩绿的小芽!你看，那枝头即将绽放的小花!┅┅这不就是一个个新生命的开始吗?植物离不开春天，动物离不开春天，人类更离不开春天。</p>
			</div>
		</div>
		<div class="scroll-bar">
			<div class="scroll-slider"></div>
		</div>
	</div>
</div>
<script src="http://a.dwstatic.com/huya/main/lib/jq_ud_mod_4de7709.js"></script>
<script>



(function(win,doc,$){
	function CusScrollBar(options){
		this._init(options)
	}

	$.extend(CusScrollBar.prototype,{
		_init : function(options) {
				var self = this;
				self.options = {
					scrollDir:'y', // 滚动方向
					contSelector:'',// 内容选择器
					barSelector:'', // 滚动条选择器
					sliderSelector:'', // 块选择器
					wheelStep:10 // 滚轮步长
				}

				$.extend(true,self.options,options || {});

				self._initDomEvent();

				

				return self;
			},
		_initDomEvent: function(){
			var opts = this.options;
			this.$cont = $(opts.contSelector);
			this.$slider = $(opts.sliderSelector);
			this.$bar = opts.barSelector?$(opts.barSelector): self.$slider.parent();
			this.$doc = $(doc);
			if(this.getMaxScrollPostion() == 0 ) {
				this.$bar.hide();


			}
			this._initSliderDragEvent()
				._bindContScroll()
				._bindMousewheel()
		},
		_initSliderDragEvent:function(){
			var self = this,
				slider = this.$slider,
				sliderEle = slider[0];
			if(sliderEle){
				var doc = this.$doc,
					dragStartPagePosition,
					dragStartScrollPosition,
					dragContBarRate;



				function mousemoveHandler(e){
						e.preventDefault();
						
						if(dragStartPagePosition == null){
							return ;
						}
						self.scrollTo(dragStartScrollPosition + (e.pageY - dragStartPagePosition)*dragContBarRate)
					}

				slider.on('mousedown',function(e){
					e.preventDefault();
					//console.log('mousedown')
					dragStartPagePosition = e.pageY;
					dragStartScrollPosition = self.$cont[0].scrollTop;
					console.log(self.getMaxScrollPostion())
					dragContBarRate = self.getMaxScrollPostion() / self.getMaxSliderPostion();
					doc.on('mousemove.scroll',mousemoveHandler).on('mouseup.scroll',function(e){
						console.log('mouseup')
						doc.off('.scroll')

					})

				})
			}
			return self;
		},

		//同步块的位置
		_bindContScroll: function(){
			var self = this;
			self.$cont.on('scroll',function(){
				var sliderEle = self.$slider &&self.$slider[0];
				if(sliderEle){
					sliderEle.style.top = self.getSliderPosition()+'px';
				}		
			})
			return self;
		},

		_bindMousewheel: function(){
			var self = this;
			self.$cont.on('mousewheel DOMMouseScroll',function(e){
				e.preventDefault();
				var oEv = e.originalEvent;
				var wheelRange = oEv.wheelDelta ? -oEv.wheelDelta/120: (oEv.detail || 0) /3;

				self.scrollTo(self.$cont[0].scrollTop + wheelRange * self.options.wheelStep);
			})

		},

		//获取块的滚动
		getSliderPosition:function(){
			var self = this,
			maxSliderPosition = self.getMaxSliderPostion();

			return Math.min(maxSliderPosition, maxSliderPosition* self.$cont[0].scrollTop/self.getMaxScrollPostion());

		},
		// 内容可滚动的高度
		getMaxScrollPostion: function(){
			var self = this;
			// Math.max 是因为会发下这种情况，内容高度小于可视区时.为0
			return Math.max(self.$cont.height(),self.$cont[0].scrollHeight) - self.$cont.height() 
		},
		// 滑块可移动高度
		getMaxSliderPostion: function(){
			var self = this;
			
			return self.$bar.height() - self.$slider.height() 
		},
		scrollTo: function(positionVal){

			var self = this;
			
			self.$cont.scrollTop(positionVal);
		}
	})
	// CusScrollBar.prototype._init = function() {
	// 	console.log(1)
	// };
	win.CusScrollBar = CusScrollBar;
})(window,document,jQuery)	

new CusScrollBar({
	contSelector:'.scroll-cont',// 内容选择器
	barSelector:'.scroll-bar', // 滚动条选择器
	sliderSelector:'.scroll-slider' // 块选择器
});

</script>
</body>
</html>

css 样式 <pre name="code" class="css">@charset "utf-8";
/* CSS Document */

html {
    height: 100%;
}
input, textarea {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
textarea {
    resize: none;
    overflow: auto;
}
em {
    font-style: normal;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
h1, p, h2 {
    margin: 0;
    font-weight: normal;
}
a, input {
    -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
}
strong ,i{
    font-style: normal;
}
img {
    border: none;
    vertical-align: top;
}
body{
	background: #ccc;
}

.scroll-demo{
	width: 540px;
	border: 1px solid #e5e5e5;
	background: #fff;
	margin: 30px auto;
}

.scroll-tab{
	height: 34px;
	border-bottom: 1px solid #e5e5e5;
	color:#666;
	background: #f8f8f8;
}
.scroll-tab .tab-item{
	float: left;
	font: 14px/34px "Microsoft Yahei";
	height: 34px;
	text-align: center;
	border-right: 1px solid #e5e5e5;
	padding: 0 20px;
}


.scroll-tab .active{
	color: #00be3c;
	background: #fff;
	border-top: 2px solid #00be3c;
	margin: -1px 0;
}
.clearfix{
	
}
.clearfix:after{
	content:'';
	display: table;
	clear: both;
}

.scroll-wrap{
	position: relative;
	width: 100%;
	height: 300px;
}

.scroll-wrap .scroll-cont{
	height: 100%;
	padding: 0 15px;
	overflow: hidden;
}
.scroll-wrap .scroll-cont h3{
	font: 14px/3 "Microsoft Yahei";
	text-align: center;

}

.scroll-wrap .scroll-cont  p{
	font-size: 14px;
	line-height: 20px;
	text-indent: 2em;
	margin-bottom: 10px;
	padding: 0 10px;

}

.scroll-wrap .scroll-bar{
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 100%;
	background: #eaeaea
}

.scroll-wrap .scroll-slider{
	position: absolute;
	top: 0;
	left: 1px;
	width: 8px;
	height: 30px;
	background: #fff;
}

magicfly9527

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义滚动条

scroll 第一篇第二篇第三篇第四篇春天来了爱春天，我爱春天的风。春天的风犹如一个温柔可爱的小姑娘在空中舞蹈。春天的风不像夏天的风那样炎热无比;不像秋天的风那样清爽宜人;更不像冬天的风那样寒冷刺骨。它是那样温柔可亲。春风吹，吹绿了大树，出开了鲜花，吹生了小草，把温暖带给千万家。
复制链接

扫一扫