杂记(隐藏滚动条及鼠标滚轮事件)

谁说胖子不能爱 提交于 2020-02-17 06:07:28

本次目的:要实现一个全屏网页,隐藏滚动条,当滚动 鼠标滚轮 时,屏幕像按帧数一样切屏而不是默认的滚动

1 隐藏滚动条

想要全屏演示隐藏滚动条,这里想到的方法是把 <body> 元素设置 overflow:hidden,然后再设置包裹元素定义 width:102%;overflow-y:hidden; 以及 overflow-x:auto;,并且使用 js 计算浏览器的高度再定义该包裹元素的高度与之相等,这些的目的是:想要在内实现一个内容可自行滚动的元素,然后将其的滚动条溢出 <body> 元素,而由于 <body> 元素定义了overflow:hidden;,所以就可以把滚动条隐藏掉,而由于设置包裹元素的高度等同于浏览器,因此 <body> 元素也可以无需生成滚动条。具体代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        .container{
            width: 102%;
            overflow:hidden;
            overflow-y: auto;
            padding-right: 2%;
            height: 500px;
        }
    </style>
    <script type="text/javascript" src="jquery1.8.3.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.container').css('height',$(window).height())
        })
    </script>
</head>
<body style="overflow: hidden;">
    <div class="container">
        <div class="box1">
            <p>1</p>
        </div>
        <div class="box2">
            <p>2</p>
        </div>
        <div class="box3">
            <p>3</p>
        </div>
        <div class="box1">
            <p>1</p>
        </div>
        <!-- .... -->
    </div>
</body>
</html>

2 鼠标滚轮事件(mousewheel以及DOMMouseScroll)

鼠标滚轮事件主要分为 FireFox派其他派

2.1 mousewheel(IE6)

IE,Opera、Chrome和Safari都实现了这个事件。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时(无论向上还是向下),就会触发mousewheel事件。这个事件可以在任何元素上面触发,最终会冒泡到document(IE8)或window(IE9、Opera、Chrome及Safari)对象。

mousewheel事件对应的event对象包含鼠标事件的所有标准信息外,还包含一个特殊的 wheelDelta 属性

  • 当用户向上滚动鼠标滚轮时,wheelDelta120 的倍数;
  • 当用户向下滚动鼠标滚轮时,wheelDelta-120 的倍数。

2.2 DOMMouseScroll

而Firefox则支持一个名为 DOMMouseScroll 的类似事件。

而有关鼠标滚轮的信息则保存在 detail 属性中:

  • 向上滚动鼠标滚轮时,这个属性的值是 -3 的倍数;
  • 向下滚动鼠标滚轮时,这个属性的值是 3 的倍数。

jquery实现代码:

<script src="//static.ydcss.com/libs/jquery/1.11.2/jquery.js"></script>
<script>
    !function ($) {
        $(document).on('mousewheel DOMMouseScroll', function (e) {
            //WebKit内核,Trident内核 => mousewheel
            //Gecko内核 => DOMMouseScroll
            e.preventDefault();
            var value = e.originalEvent.wheelDelta || -e.originalEvent.detail;
            //e.originalEvent.wheelDelta => 120(up) or -120(down) 谷歌IE内核
            //e.originalEvent.detail => -3(up) or 3(down) 火狐内核
            var delta = Math.max(-1, Math.min(1, value));
            console.log(delta < 0 ? 'down' : 'up');
        });
    }(jQuery);
</script>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!