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 模拟滚动的更多相关文章

  1. 也许是目前实现最好的js模拟滚动插件

    finger-mover 是一个集成 Fingerd(移动端以手指为单位的事件管理方案) 和 Moved(微型运动方案) 为一体的移动端动效平台,finger-mover 本身并不能为你做什么,但是附 ...

  2. dom 输入文字模拟滚动

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. robotframework 模拟滚动鼠标到底部

    Execute Javascript var ele = document.getElementsByClassName("right_main")[0];ele.scrollTo ...

  4. 鼠标滚动事件兼容性 wheel、onwheel

    wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : // ...

  5. iScroll滚动区域中select、input、textarea元素无法点击的Bug修复

    最近在一个项目中使用了iScroll4模拟滚动效果,调试过程中发现一个表单页中的所有表单项都无法点击聚焦, 如<select>.<input>.<textarea> ...

  6. ScrollFix.js：一个 iOS5 溢出滚动的（有限）修复方案

    Update: Unfortunately this does not 100% solve the problem, the script falls down when handling touc ...

  7. JavaScript一个鼠标滚动事件的实例

    <script type="text/javascript" src="./whenReady.js"></script> <!- ...

  8. Python3从零开始爬取今日头条的新闻【三、滚动到底自动加载】

    Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...

  9. Vue Router滚动行为 scrollBehavior

    滚动行为 使用前端路由,当切换到新路由时,想要页面滚动到顶部或者是保持原先的滚动位置,就像重新加载页面那样. vue-router能做到,而且更好,它让你可以自定义路由切换时页面如何滚动. 注意:这个 ...

随机推荐

  1. 转：NLog之：文件类型目标（File target）

    转:http://www.cnblogs.com/RitchieChen/archive/2012/07/16/2594308.html 英文原文[http://nlog-project.org/wi ...

  2. 复杂领域的Cynefin模型和Stacey模型

    最近好奇“复杂系统”,收集了点资料,本文关于Cynefin模型和Stacey模型.图文转自互联网后稍做修改. Cynefin模型提供一个从因果关系复杂情度来分析当前情况而作决定的框架,提出有五个领域: ...

  3. EdgesForExtendedLayout

    在IOS7 之后viewController有一个新的属性叫做edgesForExtendedLayout,这个属性指定viewController的view边缘延伸的方向,默认情况下是UIRectE ...

  4. 用二进制大对象类型Blob实现图片入库与出库的操作

    package readclobDemo.bao; import java.io.FileInputStream; import java.io.FileNotFoundException; impo ...

  5. iOS设计模式 - 单例

    备注:只能通过类的类方法才能创建单例类的实例,[[类名 alloc]init]创建实例没有用的. 原理图 说明 1. 单例模式人人用过,严格的单例模式很少有人用过 2. 严格的单例模式指的是无法通过常 ...

  6. iOS开发网络篇—网络编程基础（一）

    一.为什么要学习网络编程 1.简单说明 在移动互联网时代,移动应用的特征有: (1)几乎所有应用都需要用到网络,比如QQ.微博.网易新闻.优酷.百度地图 (2)只有通过网络跟外界进行数据交互.数据更新 ...

  7. android 进程/线程管理（四）----消息机制的思考（自定义消息机制）

    关于android消息机制 已经写了3篇文章了,想要结束这个系列,总觉得少了点什么? 于是我就在想,android为什么要这个设计消息机制,使用消息机制是现在操作系统基本都会有的特点. 可是andro ...

  8. jquery1.0源码【1-60行】构造函数及全局$变量

    一.jquery源码1-60行 该部分代码主要完成jquery对象的创建,以及全局变量$与jQurey类的映射: /* * jQuery - New Wave Javascript * * Copyr ...

  9. JS高级程序设计2nd部分知识要点1

    保存浮点数值需要的内存空间是保存整数值的两倍,因此ECMAScript会不失时机的将浮点数值转换为整数值 浮点数值的最高精度是17位小数 parseInt 字符串转换为数值,可传基数(8,16) pa ...

  10. Linux find/grep命令

    一.Find 1)批量删除文件 find . -name "*.h~" -exec rm '{}' \; 2)定位文件某一行 find / -name "demo.con ...