模拟滚动条

最新推荐文章于 2021-09-19 13:27:20 发布
最新推荐文章于 2021-09-19 13:27:20 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： javascript 技术文章 文章标签： javascript 模拟滚动条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jacky_Jxchen/article/details/8773477
版权 

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>模拟滚动条</title>
	<style type="text/css">
	*{ margin:0; padding:0;}
	body{ font-size:12px;}
	.pub-scroll-bar .scroll .prev,.pub-scroll-bar .scroll .next,.pub-scroll-bar .scroll .bar,.pub-scroll-bar .scroll .bar div{ background: url(scroll-bar.png) no-repeat 0 0;}
	.pub-scroll-bar{ position: absolute; right:0; top:0; width:14px; height:200px; overflow:hidden; cursor: default; font-size:0;}
	.pub-scroll-bar .scroll{ position:absolute; height:166px; width:14px; top:17px; }
	.pub-scroll-bar .scroll .line{ position: absolute; top:0; left:50%; margin-left:-1px; height:100%; width:2px; background-color:#DBDEE7;}
	.pub-scroll-bar .scroll .prev,.pub-scroll-bar .scroll .next{ position: absolute; left:0; width:14px; height:14px;}
	.pub-scroll-bar .scroll .prev{ top:-17px; background-position: 0 0;}
	.pub-scroll-bar .scroll .next{ bottom:-17px; background-position: -45px 0; }
	.pub-scroll-bar .scroll .prevHover{ background-position: -15px 0;}
	.pub-scroll-bar .scroll .nextHover{ background-position: -60px 0;}
	.pub-scroll-bar .scroll .prevDown{ background-position: -30px 0;}
	.pub-scroll-bar .scroll .nextDown{ background-position: -75px 0;}
	.pub-scroll-bar .scroll .bar{ position: absolute; width:14px; height:60px; background-position: -90px 0; background-repeat:repeat-y;}
	.pub-scroll-bar .scroll .bar div{ position: absolute; width:14px; height:5px; left:0; overflow: hidden;}
	.pub-scroll-bar .scroll .bar .t{ top:-3px; background-position: 0 -15px;}
	.pub-scroll-bar .scroll .bar .m{ top:50%; margin-top:-3px; background-position:0 -20px;}
	.pub-scroll-bar .scroll .bar .b{ bottom:-3px; background-position: -45px -15px;}
	.pub-scroll-bar .scroll .barHover{ background-position: -105px 0;}
	.pub-scroll-bar .scroll .barHover .t{ background-position: -15px -15px;}
	.pub-scroll-bar .scroll .barHover .m{ background-position:-15px -20px;}
	.pub-scroll-bar .scroll .barHover .b{ background-position: -60px -15px;}
	.pub-scroll-bar .scroll .barDown{ background-position: -120px 0;}
	.pub-scroll-bar .scroll .barDown .t{ background-position:-30px -15px;}
	.pub-scroll-bar .scroll .barDown .m{ background-position:-30px -20px;}
	.pub-scroll-bar .scroll .barDown .b{ background-position: -75px -15px;}


	.gc{ position: relative; padding:10px 0 10px 10px; margin: 100px;}
	.gc .scroll-con{ position: relative; overflow:hidden; height:196px;}
	.gc .scroll-con .scroll-con-in{ position: absolute; top:0; left: 0; width:100%;}
	</style>
</head>
<body>
	<div id="scroll" class="gc">
		<div class="scroll-con">
			<div class="scroll-con-in">
<pre>
作曲：俞灏明 作词：俞灏明 吴梦知
演唱：俞灏明

如果痛是一种形容
我也会倔强到最终
沉默是最完美的互动
怕什么有我陪你疯
平凡的苦衷说爱说痛都太笼统
被故事选中没资格懵懂
就算没观众自己第一个被感动
我相信到最后一分钟
如果狠是一种从容
我也不肯选择被动
如果有所谓的太贫穷
不过是不敢再做梦

平凡的苦衷说爱说痛都太笼统
被故事选中没资格懵懂
就算没观众自己第一个被感动
我相信到最后一分钟
但愿在茫茫人海中
我的眼神你会懂
但愿我们会温柔的目送
那些没看过的繁荣
那些理想的恢弘
总会有一天和我们相逢

平凡的苦衷说爱说痛都太笼统
被故事选中没资格懵懂
就算没观众自己第一个被感动
我相信到最后一分钟
太多不由衷不过是岁月的内容
叹息过再继续向前走
</pre>
			</div>
		</div>
		<div class="pub-scroll-bar">
			<div class="scroll">
				<div class="prev"></div>
				<div class="line"></div>
				<div class="bar">
					<div class="t"></div>
					<div class="m"></div>
					<div class="b"></div>
				</div>
				<div class="next"></div>
			</div>
		</div>
	</div>
	<script>
	//通过类名获得元素
	function getByClass(oParent,sClass)
	{
		var aEle = oParent.getElementsByTagName('*');
		var aResult = [];
		for(var i = 0; i < aEle.length; i++)
		{
			if(hasClass(aEle[i],sClass))
			{
				aResult.push(aEle[i])
			}
		}
		return aResult;
	}
	//有此类名
	function hasClass(obj,sClass)
	{
		var reClass = new RegExp('\\b'+sClass+'\\b');
		if(reClass.test(obj.className)){
			return true;
		}
		else
		{
			return false;
		}
	}
	//添加类名
	function addClass(obj,sClass)
	{
		if(!hasClass(obj,sClass))
		{
			obj.className+= ' '+sClass;
		}
	}
	//移除类名
	function removeClass(obj,sClass)
	{
		var reClass = new RegExp('\\s+\\b'+sClass+'\\b')
		if(hasClass(obj,sClass))
		{
			obj.className = obj.className.replace(reClass,'');
		}
	}
	//添加事件
	function myAddEvent(obj,sEvt,fn)
	{
		if(obj.attachEvent)
		{
			obj.attachEvent('on'+sEvt,fn)
		}
		else
		{
			obj.addEventListener(sEvt,fn,false);
		}
	}
	//鼠标滚轮
	function mouseScroll(obj,fn)
	{
		myAddEvent(obj,'mousewheel',isDown)
		myAddEvent(obj,'DOMMouseScroll',isDown)

		function isDown(evt)
		{
			var evt = evt || event;
			var bDown = true;
			if(evt.wheelDelta)
			{
				bDown = evt.wheelDelta < 0;
			}
			else
			{
				bDown = evt.detail > 0
			}
			fn(bDown)
			if(evt.preventDefault)
			{
				evt.preventDefault();
			}
			return false;
		}
	}
	window.onload = function()
	{
		   var oScrollBar = document.getElementById('scroll'),
		  	   oScrollCon = getByClass(oScrollBar,'scroll-con')[0],
		  			 oCon = getByClass(oScrollBar,'scroll-con-in')[0]
		    oPubScrollBar = getByClass(oScrollBar,'pub-scroll-bar')[0],
		          oScroll = getByClass(oPubScrollBar,'scroll')[0],
					oPrev = getByClass(oPubScrollBar,'prev')[0],
		        	oNext = getByClass(oPubScrollBar,'next')[0],
		        	 oBar = getByClass(oPubScrollBar,'bar')[0];
		 //向上按钮
		oPrev.onmouseover = function(){ addClass(this,'prevHover') }
		 oPrev.onmouseout = function(){ removeClass(this,'prevHover') }
		oPrev.onmousedown = function(){ addClass(this,'prevDown') }
		  oPrev.onmouseup = function(){ removeClass(this,'prevDown') }
		    oPrev.onclick = function(){ setBarTop(oBar.offsetTop-10)};
		 //向下按钮
		  oNext.onmouseover = function(){ addClass(this,'nextHover') }
		 oNext.onmouseout = function(){ removeClass(this,'nextHover') }
		oNext.onmousedown = function(){ addClass(this,'nextDown') }
		  oNext.onmouseup = function(){ removeClass(this,'nextDown') }
		  	oNext.onclick = function(){ setBarTop(oBar.offsetTop+10)};
		 //中间按钮
		  oBar.onmouseover = function(){ addClass(this,'barHover') }
		 oBar.onmouseout = function(){ removeClass(this,'barHover') }
		//oBar.onmousedown = function(){ addClass(this,'barDown') }
		  //oBar.onmouseup = function(){ removeClass(this,'barDown') }

		  //设置可拖块的高度
		  function setBarHeight()
		  {
		  	var iBarH = oCon.parentNode.offsetHeight/oCon.offsetHeight * oBar.parentNode.offsetHeight;

		  	if(oCon.offsetHeight <= oCon.parentNode.offsetHeight)
		  	{
		  		oPubScrollBar.style.display = 'none'
		  	}

		  	if( iBarH < 50)
		  	{
		  		iBarH = 50
		  	}

		  	oBar.style.height = iBarH + 'px';
		  }
		  //设置可拖块的top值
		  function setBarTop(t)
		  {
		  	if(t < 0)
	  	  	{
	  	  		t = 0;
	  	  	}
	  	  	var h = oBar.parentNode.offsetHeight - oBar.offsetHeight;
	  	  	if(t > h)
	  	  	{
	  	  		t  = h;
	  	  	}
	  	  	oBar.style.top = t +'px';
	  	  	var iScale = t/h;
	  	  	oCon.style.top = -(oCon.offsetHeight - oCon.parentNode.offsetHeight) * iScale + 'px';
		  }
		  //设置滚动条的高度
		  function scrollBarHeight()
		  {
		  	var oParentH = oPubScrollBar.parentNode.offsetHeight;
		  	oPubScrollBar.style.height = oParentH + 'px';
		  	oScroll.style.height = oPubScrollBar.offsetHeight - 34 + 'px';
		  }
		  scrollBarHeight();
		  setBarHeight();
		  //鼠标滚轮
		  mouseScroll(oPubScrollBar.parentNode,function(down){
		  	if(down)
		  	{
		  		setBarTop(oBar.offsetTop+10)
		  	}
		  	else
		  	{
		  		setBarTop(oBar.offsetTop-10)
		  	}
		  })
		  
		  //拖动
		  oBar.onmousedown = function(evt)
		  {
		  	  var evt = evt || event;
		  	  var disY = evt.clientY - this.offsetTop;
		  	  var _this = this;

		  	  if(this.setCapture)
		  	  {
		  	  	_this.onmousemove = fnMove;
		  	  	_this.onmouseup = fnUp;
		  	  }
		  	  else
		  	  {
		  	  	document.onmousemove = fnMove;
		  	  	document.onmouseup = fnUp;
		  	  }

		  	  function fnMove(evt)
		  	  {
		  	  	var evt = evt || event;
		  	  	var t = evt.clientY - disY;
		  	  	setBarTop(t);
		  	  }

		  	  function fnUp()
		  	  {
		  	  	this.onmousemove = null;
		  	  	this.onmouseup = null;
		  	  	if(this.releaseCapture)
		  	  	{
		  	  		this.releaseCapture();
		  	  	}
		  	  	removeClass(_this,'barDown')
		  	  }
		  	  addClass(this,'barDown');
		  	  return false;
		  }


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


Jxchen
关注
专栏目录
vue pc模拟滚动条
qq_40863690的博客
12-23 171
vue 模拟滚动条，测试火狐，谷歌，ie10
js模拟滚动条
莫小遇
03-09 4672
在项目开发的过程中，拿到的设计图总是很精美，但是代码实现的结果却总是差强人意。滚动条就是一个例子，今天小菜就用js去模拟滚动条，以替代原本各个浏览器风格不一的滚动条。        主要用到的事件：鼠标的拖拽(鼠标按下mousedown，鼠标移动mousemove，鼠标松开mouseup)，以及给内容添加滑轮滚动的监听事件。由于jquery中没有对这一事件的支持，所以将用原生的js去实现这一部分
html 模拟滚动条,javascript动画系列之模拟滚动条
weixin_34461414的博客
06-05 259
前面的话当元素内容溢出元素尺寸范围时，会出现滚动条。但由于滚动条在各浏览器下表现不同，兼容性不好。所以，模拟滚动条也是很常见的应用。本文将详细介绍滚动条模拟原理介绍滚动条模拟实际上和元素模拟拖拽类似。仅仅通过范围限定，使元素只可以在单一方向上拖拽test.onmousedown = function(e){e = e || event;var that = this;var disY = e.cl...
模拟滚动条的实现
m0_50855143的博客
09-16 517
冲冲冲 在实现滚动条之前，我们得先理清楚几个概念问题： 属性名称 说明 clientX 点击位置距离当前body可视区域的x坐标 clientY 点击位置距离当前body可视区域的y坐标 screenX 点击位置距离当前电脑屏幕的x坐标 screenY 点击位置距离当前电脑屏幕的y坐标 pageX 对于整个页面来说，包括了被卷去的body部分的宽度 pageY 对于整个页面来说，包括了被卷去的body部分的高度 offsetX
原生js模拟滚动条
u010234868的专栏
09-19 930
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } #box { width: 300px; height: 400px; margin: 50px auto; border:.
js实现简易模拟滚动条
Della_UI的博客
11-06 1229
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 30px; height: 500px;
js模拟滚动条滚动
weixin_30603633的博客
09-19 145
<!doctype html> <html> <head> <meta charset="utf-8"> <title>标题</title> <meta name="keywords" content=""> <meta name="description" content=""&...
JS模拟滚动条功能实现
weixin_42442123的博客
11-12 5977
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
jquery.scrollbar模拟滚动条的使用
ma_hao99的博客
08-23 2811
1.需要引入的文件 &lt;link rel="stylesheet" href="../css/jquery.scrollbar.css" /&gt; &lt;script src="../js/jquery-1.7.2.min.js"&gt;&lt;/script&gt; &lt;script src="../js/jquery.scrollbar.min.js"&
用js模拟拖拽滚动条
qq_39421320的博客
12-07 1168
如图，这是要实现的效果。 我的布局是先定义一个长方形，也就是滑动条。 然后在再定义一个其子元素div定位在他的头部，也就是滑动按钮 这里是js代码： <script> // 获取元素 var scrollBar = document.getElementById("scrollBar"); //滑动条的长度 var bar = scrollBar.child...
js模拟滚动条(横向竖向)
10-27
### JS模拟滚动条（横向与纵向）实现原理与关键技术点 #### 一、概述 在Web开发中，自定义滚动条是一种常见的需求，特别是在需要增强用户体验或者满足特定设计风格的情况下。本文将详细介绍如何使用JavaScript来...
div模拟滚动条当div宽度小于18时滚动条不滚动
12-03
这是由于IE浏览器的一个已知问题，它对模拟滚动条的最小宽度有一定的限制。在某些版本的IE中，滚动条需要至少17像素的宽度才能正常工作。在示例中，17像素宽的`div`可能没有足够的空间来显示并操作滚动条，导致滚动...
scroll:给PC浏览器使用的模拟滚动条 兼容到ie6 可以设置不同的样式来个性化定制滚动条,让你的滚动条更加酷炫 不依赖任何库 只有2kb
07-01
在本文中，我们将深入探讨如何使用JavaScript来创建一个自定义的、兼容IE6及更高版本的模拟滚动条，以及如何通过个性化定制实现更酷炫的滚动效果。标题和描述提到的"scroll"项目是一个轻量级（只有2KB）的解决方案，...
jQuery实现模拟滚动条插件版
10-24
本主题聚焦于"jQuery实现模拟滚动条插件版"，这是一个能够自定义网页滚动条外观和行为的工具。通过使用这样的插件，开发者可以为网站提供更加个性化和一致的用户体验。 首先，我们需要理解jQuery的基本用法。jQuery...
js随机打乱数组
Jxchen
12-11 6480
一、比较乱的排序方法 function fnLuanXu(num) { var aLuanXu=[]; for (var i = 0; i < num; i++) { aLuanXu[i] = i; } for (var i = 0; i < num; i++) { var iRand = parseInt(num * Math.random()); var
根据select选中的值来做的切换
Jxchen
08-25 5648
根据选择下拉菜单的中的值来切换显示内容 HTML： 选择内容1 选择内容2 选择内容3 选择内容4 要显示的内容1 要显示的内容2 要显示的内容3 要显示的内容4 JS： (function($)
删除数组中下标为n的元素
Jxchen
02-20 5597
无标题文档 function removeArrayOfN(arr,n) { if(n > arr.length-1 || n < 0){ alert('没有找到下标为'+n+'的元素！'); return;}//如果n大于或小于指定数组的长度则返回 var arr1 = []; for(var i = 0; i < arr.length; i++) { if(i =
js生成web安全色
Jxchen
11-28 5425
256色里有40种颜色在Macintosh和Windows里显示的效果不一样，所以能安全使用的只有216色。 web安全色 div{ color:#f60; font:12px/1.5 Georgia;} window.onload = function() { var aColor = ['00','33','66','99','CC
原生JavaScript模拟滚动条：MVVM风格实现与代码优化
本文将深入探讨如何使用原生JavaScript技术来模拟滚动条，以提升网页设计的美观性和用户体验。通常情况下，实现复杂的滚动条功能可能会选择使用jQuery等库，但随着MVVM框架（如Avalon）的发展，开发者倾向于利用这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值