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学习笔记—习题系列--70-573习题解析 -(Q94-Q96)
Question 94You need to create a custom application that provides users with the ability to create a ...
- Python基础（3）--列表和元组
Python包含6种内建序列:列表.元组.字符串.Unicode字符串.buffer对象.xrange对象 本篇主要讨论最常用的两种类型:列表.元组 本文地址:http://www.cnblogs.c ...
- JAVA基础学习day17--集合工具类-Collections
一.Collection简述 1.1.Collection与Collections的区别 Collections是集合的静态工具类 Collection:是集合的顶级接口 二.Sort 2.1.sor ...
- IOS的UI基础02
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- 使用docker搭建lnmp环境
Docker容器LNMP环境搭建 安装 制作镜像 启动并关联实例 安装 系统环境 硬件型号: ThinkPad T520 系统版本: ubuntu 14.04 CPU: i7 RAM: 8G 添加软件 ...
- Profile 分析 Erlang 虚拟机源码时要注意的一个问题
最近用 Intel Vtune 剖析 Erlang 虚拟机的运行,想看看那些函数和语句耗时最多,遇到一个小问题,那就是 Vtune 给出的源码和汇编码对应有问题.这个问题在 profile 或 deb ...
- ajax回调中的this.href不执行跳转的解决办法
1. 问题背景 如下所示代码: $.post("/ems/register",indata, function(data){ if(data != null && ...
- 《SQL Server企业级平台管理实践》读书笔记——SQL Server数据库文件分配方式
1.文件分配方式以及文件空间检查方法 最常用的检查数据文件和表大小的命令就是:sp_spaceused 此命令有三个缺陷:1.无法直观的看出每个数据文件和日志文件的使用情况.2.这个存储过程依赖SQL ...
- spring mvc 和junit 4集成的注意点
常规步骤: 1.导入jar包,主要有两个,spring-test 和 junit4,主要用maven管理,直接依赖即可.可以在这个网站上进行查找或下载:http://mvnrepository.com ...
- linux网络相关配置文件
linux系统一般来说分为两大类:1.RedHat系列:Redhat.Centos.Fedora等:2.Debian系列:Debian.Ubuntu等. linux系统中,TCP/IP网络是通过若干个 ...