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

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 属性。

当用户向上滚动鼠标滚轮时，wheelDelta 是 120 的倍数；
当用户向下滚动鼠标滚轮时，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>

来源：https://www.cnblogs.com/AB786883603/p/8325378.html

标签

滚动条

mousewheel

杂记（隐藏滚动条及鼠标滚轮事件）

1 隐藏滚动条

2 鼠标滚轮事件（mousewheel以及DOMMouseScroll）

2.1 mousewheel（IE6）

2.2 DOMMouseScroll