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. Android Studio利用Gradle删除没有使用到的资源和代码文件

    一.打包时忽略无用资源 我们在打包的时候默认会把没有用到的资源(比如图片)也打包成app,徒增了应用的大小.现在我们可以利用Gradle来优雅的去除没有用到的资源文件了! 就是在gradle中配置sh ...

  2. Android多媒体录制--MediaRecorder视频录制

    Android使用MediaRecorder类进行视频的录制. 需要注意,使用MediaRecorder 录音录像 的设置代码步骤一定要按照API指定的顺序来设置,否则报错 步骤为: 1.设置视频源, ...

  3. Android项目实战（六）：JazzyGridView和JazzyListView的使用

    GridView和ListView控件划动的动画效果 ------------------------------------------------------------------------- ...

  4. 多线程技术 NSThread & NSOperation & GCD

    多线程:在iOS开发中,用到多线程的处理问题的时候有很多,比如异步下载数据时刷新界面等等. 引入多线程来处理问题的关键就是,基于多线程可以使界面更加流畅,防止界面假死. 界面假死:比如你单击一个按钮来 ...

  5. [eclipse]“Syntax error, insert "}" to complete”报错的解决方案

    背景:本人在网上学习java时,看到一段样例代码比较好,因此复制粘贴到eclipse中看看编译结果.结果eclipse报"Syntax error, insert "}" ...

  6. .net WEB程序访问locahost和IP使用

    1.服务都在本机调用用 localost 2.部署站点访问时用ip

  7. 5+ App开发入门指南

    HTML5 Plus应用概述 HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实 ...

  8. 命令行方式使用abator.jar生成ibatis相关代码和sql语句xml文件

    最近接手一个老项目,使用的是数据库是sql server 2008,框架是springmvc + spring + ibatis,老项目是使用abator插件生成的相关代码,现在需要增加新功能,要添加 ...

  9. 关于Redis info的参数总结

    Redis官网对 info 已经讲解的比较清楚的,参考文档 .可以看到,info的输出结果是分几块的,有Servers.Clients.Memory等等,通过info后面接这些参数,可以指定输出某一块 ...

  10. Oracle与SQL SERVER编程差异分析（入门）

    网上有关Oracle与SQL SERVER性能差异的文章很多,结论往往是让你根据数据量与预算来选择数据库.但实际项目中,特别是使用 .Net 开发的系统,支持以上两种数据库或者更多已经成为Boss的普 ...