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能做到,而且更好,它让你可以自定义路由切换时页面如何滚动. 注意:这个 ...
随机推荐
- R语言学习笔记：简单的回归分析
fitbit <- read.csv("fitbit.csv") date cal step dist floor sit inactive walk run2 ...
- String.format() 格式化字符串
1.几种常见的转换符 转换符 说明 实例 %d 整数类型(十进制) 99 %f 浮点类型 99.99 %s 字符串类型 "mingrisoft" %c 字符类型 'm' %b 布尔 ...
- App开发流程之Xcode配置和本地化
补充一点遗漏的Xcode配置. 1.偏好设置.Xcode的菜单栏Xcode -> Preference Fonts & Colors可以自定义编码区和控制台的背景.字体. Text Ed ...
- 【原】iOSCoreAnimation动画系列教程（一）：CABasicAnimation【包会】
本文的最新版本已经发布在简书[编程小翁]上,强烈建议到上查看简书,[点击这里跳转]. 在iOS中,图形可分为以下几个层次: 越上层,封装程度越高,动画实现越简洁越简单,但是自由度越低:反之亦然.本文着 ...
- iOS 你将会遇到的
1.解释ARC原理,ARC引入之后,iOS增加了几个修饰符,分别是什么?并解释何时应该使用? 2.给你一个可变数组aMutableArray,请写出你认为较好的算法代码. 3.UITableView是 ...
- iOS多线程-05-多图下载
效果图 常见问题及解决方法 图片重复下载 将内存保存在内存或沙盒中. 若下载的图片量较大,则会出现UI界面不流畅的现象 在子线程中执行下载操作,然后回到主线程成中进行UI界面的刷新. 由于cell的循 ...
- 解决log4j:WARN No appenders could be found for logger (org.springframework.web.context.ContextLoader)警告信息的问题
spring项目经常在启动tomcat时报如下警告信息: log4j:WARN No appenders could be found for logger (org.springframework. ...
- 第k大的数，前k大的数
1.排序后去出前k个,o(n*log(n)) 如果k<log(n),可以考虑直接选择排序,因为只需要执行找到第k个就可以结束 o(n*k) 2.o(nlog(k))快排把数分为了两个部分, ...
- 编写一个Java项目，定义包，在包下定义包含main方法的类，在main方法中声明8种基本数据类型的变量并赋值，练习数据类型转换。
- MongoDB学习笔记——文档操作之增删改
插入文档 使用db.COLLECTION_NAME.insert() 或 db.COLLECTION_NAME.save() 方法向集合中插入文档 db.users.insert( { user_id ...