mousewheel 模拟滚动
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>
mousewheel 模拟滚动的更多相关文章
- 也许是目前实现最好的js模拟滚动插件
finger-mover 是一个集成 Fingerd(移动端以手指为单位的事件管理方案) 和 Moved(微型运动方案) 为一体的移动端动效平台,finger-mover 本身并不能为你做什么,但是附 ...
- dom 输入文字模拟滚动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- robotframework 模拟滚动鼠标到底部
Execute Javascript var ele = document.getElementsByClassName("right_main")[0];ele.scrollTo ...
- 鼠标滚动事件兼容性 wheel、onwheel
wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : // ...
- iScroll滚动区域中select、input、textarea元素无法点击的Bug修复
最近在一个项目中使用了iScroll4模拟滚动效果,调试过程中发现一个表单页中的所有表单项都无法点击聚焦, 如<select>.<input>.<textarea> ...
- ScrollFix.js：一个 iOS5 溢出滚动的（有限）修复方案
Update: Unfortunately this does not 100% solve the problem, the script falls down when handling touc ...
- JavaScript一个鼠标滚动事件的实例
<script type="text/javascript" src="./whenReady.js"></script> <!- ...
- Python3从零开始爬取今日头条的新闻【三、滚动到底自动加载】
Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...
- Vue Router滚动行为 scrollBehavior
滚动行为 使用前端路由,当切换到新路由时,想要页面滚动到顶部或者是保持原先的滚动位置,就像重新加载页面那样. vue-router能做到,而且更好,它让你可以自定义路由切换时页面如何滚动. 注意:这个 ...
随机推荐
- SharePoint中Event Handler的触发
一直以来对于Event Handler的感觉就是:添加.编辑和删除动作之前和动作之后,我们在SharePoint系统中可以做的一些事情 不过在最近处理的一个问题中,发现它在触发时机上出了一点问题 ...
- android Java BASE64编码和解码一：基础
今天在做Android项目的时候遇到一个问题,需求是向服务器上传一张图片,要求把图片转化成图片流放在 json字符串里传输. 类似这样的: {"name":"jike&q ...
- Masonry第三方代码约束
#import "RootViewController.h" #import "Masonry.h" @interface RootViewController ...
- UITabBarController QQ
AppDelegate.m #import "AppDelegate.h" #import "FirstViewController.h" #import &q ...
- Quartz2D学习笔记
1.drawRect方法 //1.证明drawRect方法是在viewDidLoad后自动调用的,方便处理View的相关属性 // YQView * view = [[YQView alloc] in ...
- IOS 杂笔－3 (property参数)
(1)内存管理相关参数 Retain:对对象release旧值,retain新值(适用于OC对象类型) Assign:直接赋值(默认,适用于非oc对象类型) Copy:release旧值,copy新值 ...
- 【原】训练自己haar-like特征分类器并识别物体（2）
在上一篇文章中,我介绍了<训练自己的haar-like特征分类器并识别物体>的前两个步骤: 1.准备训练样本图片,包括正例及反例样本 2.生成样本描述文件 3.训练样本 4.目标识别 == ...
- debian7 请把标有“Debian GNU/Linux 7.1.0 _Wheezy_ - Official amd64 DVD Binary-1 20130615-23:06”的盘片插入驱动器“/media/cdrom/”再按回车键
有时候,在通过apt-get install 安装软件的时候,会出现: 更换介质:请把标有“Debian GNU/Linux 7.1.0 _Wheezy_ - Official amd64 DVD B ...
- SAM4E单片机之旅——18、通过AFEC(ADC)获取输入的电压
很多时候,一个电压不仅仅需要定性(高电平或者低电平),而且要定量(了解具体电压的数值).这个时候就可以用到模数转换器(ADC)了.这次的内容是测量开发板搭载的滑动变阻器(VR1)的电压,然后把ADC转 ...
- Effective Java 27 Favor generic methods
Static utility methods are particularly good candidates for generification. The type parameter list, ...