自定义滚动条jQuery版

最新推荐文章于 2023-05-05 23:22:22 发布
pvfhv
最新推荐文章于 2023-05-05 23:22:22 发布
阅读量2.8k
点赞数
分类专栏： javascript 文章标签：自定义滚动条
本文链接：https://blog.csdn.net/pvfhv/article/details/6173939
版权
javascript 专栏收录该内容
66 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.div1 {
				width: 200px;
				height: 400px;
				border: solid 1px red;
				margin: 10px auto;
				position: relative;
			}
			.div2 {
				position: absolute;
				top: 0;
				left: 0;
				width: 200px;
				height: 40px;
				background: blue;
				opacity: 0.3;
			}
			.div3 {
				position: absolute;
				top: 40px;
				height: 360px;
				width: 200px;
				background: yellow;
				overflow: hidden;
			}
			.content {
				width: 160px;
				position: absolute;
			}
			.scrollouter {
				width: 20px;
				height: 360px;
				background: #ccc;
				position: absolute;
				right: 0;
				top: 0;
			}
			.scrollinner {
				position: absolute;
				width: 20px;
				height: 20px;
				background: #FF0000;
			}

		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2"></div>
			<div class="div3">
				<div class="content">
					在6月20日的发布会上，盘古氏发言人介绍了与《变4》的合作经过：“2013年4月间，周宁（北京诚信盛世体育文化发展有限公司负责人，前北京国安足球俱乐部队长）以及黄健华（Kenneth Huang，美籍华人，家赋公司创始人之一，家赋美国公司股东、执行董事）开始与盘古氏公司接洽《变形金刚4》电影的战略合作事宜，并介绍了如下的合作规划：《变形金刚4》电影相关衍生品的制作和销售；电影全球首映VIP庆典；《变形金刚4》影片展现盘古形象等。2013年6月，在周宁向盘古氏公司出示了美国家赋公司和派拉蒙公司的相关授权，足以证明黄健华和周宁是有权代表后，双方商定了首期合作的主要事项，并于6月15日与家赋中国（负责人黄健华）和诚信盛世（负责人周宁）签署协议，成为《变形金刚4》的中国战略合作伙伴。”在6月20日的发布会上，盘古氏发言人介绍了与《变4》的合作经过：“2013年4月间，周宁（北京诚信盛世体育文化发展有限公司负责人，前北京国安足球俱乐部队长）以及黄健华（Kenneth Huang，美籍华人，家赋公司创始人之一，家赋美国公司股东、执行董事）开始与盘古氏公司接洽《变形金刚4》电影的战略合作事宜，并介绍了如下的合作规划：《变形金刚4》电影相关衍生品的制作和销售；电影全球首映VIP庆典；《变形金刚4》影片展现盘古形象等。2013年6月，在周宁向盘古氏公司出示了美国家赋公司和派拉蒙公司的相关授权，足以证明黄健华和周宁是有权代表后，双方商定了首期合作的主要事项，并于6月15日与家赋中国（负责人黄健华）和诚信盛世（负责人周宁）签署协议，成为《变形金刚4》的中国战略合作伙伴。”在6月20日的发布会上，盘古氏发言人介绍了与《变4》的合作经过：“2013年4月间，周宁（北京诚信盛世体育文化发展有限公司负责人，前北京国安足球俱乐部队长）以及黄健华（Kenneth Huang，美籍华人，家赋公司创始人之一，家赋美国公司股东、执行董事）开始与盘古氏公司接洽《变形金刚4》电影的战略合作事宜，并介绍了如下的合作规划：《变形金刚4》电影相关衍生品的制作和销售；电影全球首映VIP庆典；《变形金刚4》影片展现盘古形象等。2013年6月，在周宁向盘古氏公司出示了美国家赋公司和派拉蒙公司的相关授权，足以证明黄健华和周宁是有权代表后，双方商定了首期合作的主要事项，并于6月15日与家赋中国（负责人黄健华）和诚信盛世（负责人周宁）签署协议，成为《变形金刚4》的中国战略合作伙伴。”在6月20日的发布会上，盘古氏发言人介绍了与《变4》的合作经过：“2013年4月间，周宁（北京诚信盛世体育文化发展有限公司负责人，前北京国安足球俱乐部队长）以及黄健华（Kenneth Huang，美籍华人，家赋公司创始人之一，家赋美国公司股东、执行董事）开始与盘古氏公司接洽《变形金刚4》电影的战略合作事宜，并介绍了如下的合作规划：《变形金刚4》电影相关衍生品的制作和销售；电影全球首映VIP庆典；《变形金刚4》影片展现盘古形象等。2013年6月，在周宁向盘古氏公司出示了美国家赋公司和派拉蒙公司的相关授权，足以证明黄健华和周宁是有权代表后，双方商定了首期合作的主要事项，并于6月15日与家赋中国（负责人黄健华）和诚信盛世（负责人周宁）签署协议，成为《变形金刚4》的中国战略合作伙伴。”
				</div>
				<div class="scrollouter">
					<div class="scrollinner"></div>
				</div>
			</div>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			$('.scrollinner').mousedown(function(e) {
				var disY = e.pageY - $(this).offset().top;

				$(document).mousemove(function(e) {
					var t = e.pageY - disY - $('.div3').offset().top;
					setScrollPos(t);
				}).mouseup(function() {
					$(this).unbind('mousemove mouseup');
				});

				return false;
			});

			function setScrollPos(t) {
				var down = $('.scrollouter').height() - $('.scrollinner').height();

				if (t < 0) {
					t = 0;
				}

				if (t > down) {
					t = down;
				}

				$('.scrollinner').css('top', t + 'px');

				var scale = t / down;

				//滚动文字
				var curT = ($('.div3').height() - $('.content').height()) * scale;
				$('.content').css('top', curT + 'px');
			}

			function addEvent(obj, eName, fn) {
				if (obj.attachEvent) {
					obj.attachEvent('on' + eName, fn);
				} else {
					obj.addEventListener(eName, fn, false);
				}
			}

			function onWheelScroll(e) {
				var bDown = e.wheelDelta ? e.wheelDelta < 0 : e.detail > 0;

				if (bDown) {
					setScrollPos($('.scrollinner').position().top+10);
				}else{
					setScrollPos($('.scrollinner').position().top-10);
				}
			}

			addEvent($('.scrollouter').get(0), 'mousewheel', onWheelScroll);
			addEvent($('.scrollouter').get(0), 'DOMMouseScroll', onWheelScroll);
			addEvent($('.content').get(0), 'mousewheel', onWheelScroll);
			addEvent($('.content').get(0), 'DOMMouseScroll', onWheelScroll);

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