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能做到,而且更好,它让你可以自定义路由切换时页面如何滚动. 注意:这个 ...
随机推荐
- IOS 简单动画 首尾式动画
首尾式动画 首尾式动画即通过实现控件由初始状态到结束状态的过程.(主要表现在控件的Frame 透明度 ) // // ViewController.m // CX 简单动画 // // Created ...
- 多线程之NSOperation和NSOperationQueue
这篇文章里我将不过多的谈及理论知识,这些东西会的自然会,不会的,看多了也是云里雾里.下面我讲更多的用代码+注释的方式来讲如何使用NSOperation和NSOperationQueue. 1.NSOp ...
- iOS开发笔记12:iOS7上UITextField限制字数输入导致崩溃问题
在一些场景中,需要限制用户的输入字数,例如在textField里进行控制(textView也类似,崩溃原因也相同),如图所示 系统会监听文本输入,需要注意的第一点是输入法处于联想输入还未确定提交的时候 ...
- iOS开发之网络数据解析--中文输出
对于服务器返回的数据,解析之后直接打印,如果数据中原本有中文,可能会出现中文乱码的结果: 为了避免这个问题,可以通过类别来重写系统和打印相关的方法. 步骤: 1.新建文件名:Foundation+Lo ...
- IOS之KVC和KVO(未完待续)
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- DEV 财务货币格式单元格
在用友金蝶等财务软件中,经常需要输入货币类型的数据, 那么这种输入框要如何制作呢? 扩展DataGridView 的功能 出自在天空飞翔博客 http://www.cnblogs.com/micha ...
- js中 字符串与Unicode 字符值序列的相互转换
一. 字符串转Unicode 字符值序列 var str = "abcdef"; var codeArr = []; for(var i=0;i<str.length;i++ ...
- Java并发大师Brain Goetz和Doug Lea 的中英文博客文章地址
Java并发大师Brain Goetz和Doug Lea是Java并发方面最权威的人物,他的文章绝对是最具有参考价值的,值得仔仔细细的推敲和研究. Brain Goetz 中文地址:http://ww ...
- 集算器协助java处理多样性数据源之MongoDB
MongoDB不支持join,其官网上推荐的unity jdbc可以把数据取出来进行二次计算实现join运算,但这些join.group.函数.表达式等高级功能都是收费版才有,而且即使是收费版本,对子 ...
- UVALive 6073 Math Magic
6073 Math MagicYesterday, my teacher taught us about m ...