文档章节

javascript滚轮控制模拟滚动条

zfx2016
 zfx2016
发布于 2016/10/19 11:42
字数 221
阅读 5
收藏 0

此实例通过对滚轮事件的监听,通过滚轮控制滚动条的上下移动,可以将其修改后运用与使用滚轮缩放图片、改变透明度等特效。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#boxwrap{
				position: relative;
				width: 15px;
				height: 500px;
				margin: 50px auto;
				box-sizing: border-box;
				border: 1px solid gainsboro;
				border-radius: 6px;
			}
			#box{
				position: absolute;
				left: 0px;
				top: 0px;
				width: 13px;
				height: 30px;
				background: gray;
				border-radius: 6px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function (){
				var boxwrp = document.getElementById('boxwrap');
				var box = document.getElementById('box');
				//兼容firefox
				if(boxwrp.addEventListener){
					document.addEventListener("DOMMouseScroll", fn, false);
				}
				document.onmousewheel = fn;//兼容IE、chrome
				
				function fn(ev){
					var ev = ev||event;
					var bool = false;
					//IE、chrome  向上:120,向下:-120
					if(ev.wheelDelta){
						bool= ev.wheelDelta > 0? true : false;
					}
					//firefox  向上:-3,向下:3
					else{
						bool= ev.detail < 0? true : false;
					}
					
					if(bool){
						if(box.offsetTop>=10){
							box.style.top = box.offsetTop - 10 + "px";
						}
						else{
							box.style.top = 0;
						}
						
					}
					else{
						if(box.offsetTop<=boxwrp.offsetHeight-box.offsetHeight-10){
							box.style.top = box.offsetTop + 10 + "px";
						}
						else{
							box.style.top = boxwrp.offsetHeight - box.offsetHeight + "px";
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="boxwrap">
			<div id="box"></div>
		</div>
	</body>
</html>


© 著作权归作者所有

zfx2016
粉丝 1
博文 22
码字总数 14027
作品 0
广州
前端工程师
私信 提问
HTML+CSS+JS实现TABLE固定列(常见浏览器兼容)的最佳实践

BS架构的企业级应用中,当一个表格列数较多时,用户一个常见的需求就是把前面几个重要的列固定住,这样拖动滚动条时固定的列会方便用户查看数据,用户体验很好。一些重量级的JS组件库也都有这...

李玉珏
2015/04/23
13.4K
0
进度条的2种实现方式1.js 2.纯css

Scroll Indicator称之为滚动指示器,是Web中常见的一种效果。用户滚动垂直滚动内容时,页面顶部有一个类似进度条的效果,当内容滚动到页面最低端,进度条效果填满整个进度条。感觉描述得有点...

筱飞
01/11
20
0
超棒的自定义超酷滚动条jQuery插件 - Perfect Scrollbar

日期:2013-2-16 来源:GBin1.com 在线演示 可能大家厌倦了千篇一律的页面滚动条,如果你希望能够设计出与众不同的页面UI设计的话,Perfect ScrollBar可能就是你寻找的解决方案。 这个滚动条...

gbin1
2013/02/18
6
0
超棒的自定义超酷滚动条jQuery插件 - Perfect Scrollbar

日期:2013-2-16 来源:GBin1.com 在线演示 可能大家厌倦了千篇一律的页面滚动条,如果你希望能够设计出与众不同的页面UI设计的话,Perfect ScrollBar可能就是你寻找的解决方案。 这个滚动条...

gbin1
2013/02/17
1K
0
原生js模拟滚动条

滚动条的基本交互有两个,鼠标拖拽滚动条和滚轮滚动。 滚动条涉及到的dom元素:1、主体区域(obj,box2与box4的父元素),鼠标滚动的触发主体,包含内容和滚动条,宽高自定。2、滚动条(box...

bothyan
2015/09/10
735
0

没有更多内容

加载失败,请刷新页面

加载更多

VMware vSphere ESXi主机的访问控制

在vShpere中,访问ESXi主机的途径很多,如下: ESXi DCUI ESXi Shell ESXi SSH ESXi Host Client vCenter --> vSphere web client / vSphere Client VMware vSphere ESXi主机的访问控制,除了......

大别阿郎
12分钟前
1
0
大神讲解CGI、FastCGI和PHP-FPM关系图解

参考资料 概念了解:CGI,FastCGI,PHP-CGI与PHP-FPM:http://www.nowamagic.net/librarys/veda/detail/1319 php中fastcgi和php-fpm是什么东西:https://www.zybuluo.com/phper/note/50231 ......

网络小虾米
21分钟前
1
0
《DNS攻击防范科普系列3》 -如何保障 DNS 操作安全

引言 前两讲我们介绍了 DNS 相关的攻击类型,以及针对 DDoS 攻击的防范措施。这些都是更底层的知识,有同学就来问能否讲讲和我们的日常操作相关的知识点,今天我们就来说说和我们日常 DNS 操...

Mr_zebra
22分钟前
1
0
zk中ServerCnxn

实现接口Stats, Watcher 内部类 DisconnectReason CloseRequestException EndOfStreamException(流关闭) 属性 方法 getSessionTimeout 获取session失效时间 sendResponse 发送回复数据 se......

writeademo
27分钟前
1
0
如何将 Redis 用于微服务通信的事件存储

来源:Redislabs 作者:Martin Forstner 翻译:Kevin (公众号:中间件小哥) 以我的经验,将某些应用拆分成更小的、松耦合的、可协同工作的独立逻辑业务服务会更易于构建和维护。这些服务(也...

中间件小哥
30分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部