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能做到,而且更好,它让你可以自定义路由切换时页面如何滚动. 注意:这个 ...
随机推荐
- 使用Kindle4rss推送自己感兴趣的博文
微信是个好东西,信息量超大,正能量的东西居多,但信息过载的滋味也很不好受,浏览了一大堆铺天盖地的信息后,关上手机后大脑又重新回到空白.所以还是喜欢用RSS聚合功能,自己去订阅优秀的博客或新闻,当有更新 ...
- PL/SQL基础2（笔记）
1 第一个PL/SQL的程序 DECLARE BEGIN DBMS_OUTPUT.PUT_LINE('Hello World!'); END; / --2一个简单的PL/SQL程序 DECLARE v ...
- c语言中的部分字符串和字符函数
// // main.c // homeWork1230 // // #include <stdio.h> #include <string.h> #include <c ...
- 网络开始---多线程---NSThread-02-线程状态（了解）（三）
#import "HMViewController.h" @interface HMViewController () @property (nonatomic, strong) ...
- 深入理解java虚拟机（6）---内存模型与线程 & Volatile
其实关于线程的使用,之前已经写过博客讲解过这部分的内容: http://www.cnblogs.com/deman/category/621531.html JVM里面关于多线程的部分,主要是多线程是 ...
- cxf构建webservice的两种方式
一.简介 对于基于soap传输协议的webservice有两种开发模式,代码优先和契约优先的模式.代码优先的模式是通过编写服务器端的代码,使用代码生成wsdl:契约优先模式首先编写wsdl,再通过ws ...
- 避免jQuery名字冲突--noConflict()方法
众所周知,在jQuery语法中,$符号是jQuery的简写方式.但在某些情况下,可能需要在同一个页面引入其他javascript库(比如Prototype).因为$简短方便,很多的库也是使用$符号.为 ...
- 轮式移动机器人QBot的使用
夏季学期选了智能移动机器人导论课程,开始接触移动机器人.作为一门面向大二.大三学生的一门导论式的课程,课程作业其实并不太难,然而我们为了完成课程作业,前前后后还是弄了好几个星期,以至放了暑假都还要和Q ...
- Spring中AOP原理，源码学习笔记
一.AOP(面向切面编程):通过预编译和运行期动态代理的方式在不改变代码的情况下给程序动态的添加一些功能.利用AOP可以对应用程序的各个部分进行隔离,在Spring中AOP主要用来分离业务逻辑和系统级 ...
- 【软件使用】GitHub使用教程for VS2012
一直以来都想使用Git来管理自己平时积累的小代码,就是除了工作之外的代码了.有时候自己搞个小代码,在公司写了,就要通过U盘或者网盘等等一系列工具进行Copy,然后回家才能继续在原来的基础上作业.Cop ...