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. UtilDev Web Server Pro

    A good tool for asp.net hosting: http://ultidev.com/products/UWS-Cassini-Pro/

  2. C#中读写JSON风格的配置信息

    程序里经常要保存一些设置参数,可以用INI,CONFIG,注册表,XML等等,在stackoverflow中找到这样一篇帖子. http://stackoverflow.com/questions/4 ...

  3. c++ const用法小结

    const用法 1,定义全局变量的内存分配问题 #define  Pi_1  3.14       //使用#define宏 const double Pi_2 = 3.14    //使用const ...

  4. Android中进程与线程

    常说的主线程(UI线程)是什么? 当一个Android程序刚启动的时候,我们的android系统就会启动一个带有一个单一线程的linux进程.默认情况下,所有的组件比如Activity都运行在同样的一 ...

  5. IOS开发－表单控件的应用

    1. 需求描述 2. 开发环境介绍 3. 创建一个工程 4. 工程配置介绍 5. 目录结构介绍 6. 界面设置 7. 关联输入输出 8. 关联事件代码 9. 运行结果 10. UITextField ...

  6. Linux写时拷贝技术(copy-on-write)

    COW技术初窥: 在Linux程序中,fork()会产生一个和父进程完全相同的子进程,但子进程在此后多会exec系统调用,出于效率考虑,linux中引入了“写时复制“技术,也就是只有进程空间的各段的内 ...

  7. http://runjs.cn/

    http://runjs.cn/ RunJS - 在线编辑.展示.分享.交流你的 JavaScript 代码

  8. tair源码分析——leveldb存储引擎使用

    分析完leveldb以后,接下来的时间准备队tair的源码进行阅读和分析.我们刚刚分析完了leveldb而在tair中leveldb是其几大存储引擎之一,所以我们这里首先从tair对leveldb的使 ...

  9. 问题解决——在结构体中使用set保存结构体数据

    =====================声明========================== 本文原创,转载请明确的注明出处和作者,并保持文章的完整性(包括本声明部分). 本文链接:http:/ ...

  10. SpringMVC中@ResourceMapping的基本用法

    最近从Struts转投SpringMVC,看代码时发现这个注解,感觉其作用应该和Struts的action差不多,把用法记录下来. 1. @RequestMapping(value="/de ...