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. C标准库<signal.h>实现

    本文地址:http://www.cnblogs.com/archimedes/p/c-library-signal.html,转载请注明源地址. 背景知识 signal.h是C标准函数库中的信号处理部 ...

  2. 在Android开发中使用Ant 二：进行一次完整的打包

    一次完整的Android打包要进行以下的几步:编译.代码混淆.打包apk.签名apk.apk优化. 为了能包涵使用NDK的情况,在这里使用一个有native代码的工程TestJni. 在工程根目录下新 ...

  3. IOS MenuController初步了解

    IOS MenuController初步了解 默认情况下有以下控件已经支持MenuController. UITextField UITextView UIWebView 让其他控件也支持MenuCo ...

  4. iOS 利用CoreLocation和MapKit开发搜索附近的商场功能

    代码如下: ////  SearchNearbyShopViewController.m//  SearchNearbyShop////  Created by Linzhixiao on 16/2/ ...

  5. Silverlight项目笔记8：层次布局、客户端读取shp、ExecuteCountAsync、柱状图、url传参

    1.层次布局 由于地图窗口和菜单栏都在一个父容器内,在浏览器缩小到一定程度点击地图弹出infoWindow时,会出现菜单栏遮挡infoWindow中间部分的现象,于是通过设置Canvas.ZIndex ...

  6. Mac下Apache Tomcat安装配置

    Java Web如果稍微知道一点,一般对Tomcat都不会陌生,Apache是普通服务器,本身只支持html即普通网页,可以通过插件支持PHP,还可以与Tomcat连通(单向Apache连接Tomca ...

  7. Jmeter组件执行顺序与作用域

    一.Jmeter重要组件: 1)配置元件---Config Element: 用于初始化默认值和变量,以便后续采样器使用.配置元件大其作用域的初始阶段处理,配置元件仅对其所在的测试树分支有效,如,在同 ...

  8. bat自动执行telnet

    @del c:\temp.vbs @echo on error resume next >>c:\temp.vbs @echo dim WshShell>>c:\temp.vb ...

  9. Effective Java 54 Use native methods judiciously

    Java Native Interface(JNI) allows Java applications to call native methods, which are special method ...

  10. Effective Java 65 Don't ignore exceptions

    Principle An empty catch block defeats the purpose of exceptions, which is to force you to handle ex ...