mousewheel 模拟滚动
2016-06-28 22:58
225 查看
div{ box-sizing:border-box; } .father{ width:500px; height:400px; margin:auto; margin-top: 50px; border: 1px solid red; overflow: hidden; position: relative; } .child{ width:60%; height: 1210px; border: 1px solid green; margin:auto; position: absolute; left:100px; }
function load(){ window.child=document.getElementById('child'); window.father=child.parentNode; father.addEventListener('mousewheel',function(e){ // father.addEventListener('scroll',function(e){ e.preventDefault(); e.stopPropagation(); move(e.deltaY*-1); }) } function move(offset) { var top = child.style.top; if(top==='') { top=0; offset= offset/1 + top/1; } else { top=top.replace('px',''); offset= offset/1 + top/1; } var moved=Math.abs(offset) +father.offsetHeight; if(moved>child.offsetHeight && offset<0) { child.style.top = -1*(child.offsetHeight-father.offsetHeight+6) +'px'; return; } if(offset>0) { child.style.top='0px'; return; } child.style.top=(offset) +'px'; }
<body onload="load()"> <div class="father"> <div class="child" id="child"> </div> </div>
相关文章推荐
- Tensorflow: Linear Regression
- pl/sql表类型
- libuv学习笔记(18)
- HTTP连接管理
- Spring中bean用法详解
- 字符设备驱动
- 【SQL】 sql中的日期比较
- Android数据库框架——ORMLite轻量级的对象关系映射(ORM)Java包
- Android数据库框架——ORMLite轻量级的对象关系映射(ORM)Java包
- 提高项目12.1-数组大折腾 加倍
- TCP、IP详解(转)
- 加载图片出现OOM
- SSRF漏洞分析,利用及其防御
- 新路线
- Spring LDAP
- hover显示遮罩层及border旋转
- 匿名内部类实现接口,继承类
- linux日志文件说明
- loadrunner函数
- NOIP2015 Revenge