一次滚动一屏的滚动条行为实现
在一些类似于幻灯片之类的页面上,滚动条被限制为了每次滚动一个屏幕,也就是滚动幻灯片的一页。但浏览器并没有直接提供这样的功能,我们通常是通过程序控制来实现的。这样的程序并不困难,只要劫持鼠标滚轮事件,将其修改到自己需要的行为即可。
下面是一个简单地实现代码,这里没有考虑低版本浏览器的兼容,如果需要可以使用jQuery之类的库或手动编写兼容代码。<!DOCTYPE html>
<style>
html,body {height:100%;}
body {margin:0px;}
div {height:100%;}
</style>
<body>
<script>
addEventListener("DOMContentLoaded",function(){
var body=document.body,html=document.documentElement;
var itv,height=document.body.offsetHeight;
var page=scrollTop()/height|0;
//窗口大小改变事件
addEventListener("resize",onresize),onresize();
//滚轮事件
document.body.addEventListener(
"onwheel" in document?"wheel":"mousewheel",
function(e){
clearTimeout(itv);
itv=setTimeout(function(){
var delta=e.wheelDelta/120||-e.deltaY/3;
page-=delta;
var max=(document.body.scrollHeight/height|0)-1;
if(page<0)return page=0;
if(page>max)return page=max;
move();
},100);
e.preventDefault();
}
);
//平滑滚动
function move(){
var value=height*page;
var diff=scrollTop()-value;
(function callee(){
diff=diff/1.2|0;
scrollTop(value+diff);
if(diff)itv=setTimeout(callee,16);
})();
};
//resize事件
function onresize(){
height=body.offsetHeight;
move();
};
//获取或设置scrollTop
function scrollTop(v){
if(v==null)return Math.max(body.scrollTop,html.scrollTop);
else body.scrollTop=html.scrollTop=v;
};
});
</script>
<div style="background:#FEE;"></div>
<div style="background:#EFE;"></div>
<div style="background:#EEF;"></div>
相关文章
- 一次nginx返回422状态码的经历
- 【01】Spring源码-手写篇-手写IoC实现
- 产品太多了,如何实现一次登录多产品互通?
- 实现盒子宽度随鼠标位置而改变
- 程序员不可不学的REST服务集成,Feign实现REST调用?
- 如何实现通用爬虫并检测可用性?
- 不怕面试再问HashMap,一次彻底地梳理(原理+手写实现)
- js漂浮广告实现代码(合集经典)详解编程语言
- javascript实现每秒执行一次的方法详解编程语言
- Oracle一次插入多条数据的简单实现(oracle多条数据插入)
- Oracle 建表授权:为实现数据安全而努力(oracle建表授权)
- 文件系统Linux下挂载Tmpfs文件系统实现快速数据存储(linux挂载tmpfs)
- Linux C实现抓包:一次尝试(linuxc抓包)
- Linux下简单记账软件:快速实现财务自由(linux记账软件)
- 命令Linux实现每分钟定时执行命令(linux每分钟执行一次)
- Oracle表设计:一次完美的实现(oracle表设计)
- MySQL如何实现一次插入多条数据(mysql 插入一张表)
- SQL Server下的列级加密实现(sqlserver列加密)
- c语言实现MySQL一次修改多张表(c mysql修改多个表)
- 简单高效MySQL一次插入多条数据的实现方法(mysql一次插入)
- MySQL实现一次性删除指定ID的数据(mysql一次删除 id)
- 轻松实现MySQL多行删除(mysql一次删除多行)
- Redis实现一次读取所有数据(redis读出所有数据)
- MySQL一次执行多条语句的实现及常见问题
- php模拟socket一次连接,多次发送数据的实现代码
- AndroidTween动画之RotateAnimation实现图片不停旋转效果实例介绍
- 基于javascript的COOkie的操作实现只能点一次
- Delphi实现检测并枚举系统安装的打印机的方法
- Python中多线程thread与threading的实现方法
- 用C/C++来实现Node.js的模块(一)