Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

一次滚动一屏的滚动条行为实现

  在一些类似于幻灯片之类的页面上,滚动条被限制为了每次滚动一个屏幕,也就是滚动幻灯片的一页。但浏览器并没有直接提供这样的功能,我们通常是通过程序控制来实现的。这样的程序并不困难,只要劫持鼠标滚轮事件,将其修改到自己需要的行为即可。
  下面是一个简单地实现代码,这里没有考虑低版本浏览器的兼容,如果需要可以使用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>

  代码中有一些注释,我就不详述其原理了。另外这个代码是现在临时写出来的,有什么问题请告诉我以便修改。如果有更好的实现思路也欢迎分享。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^