鼠标滚轮事件以及满屏滚动实现

MDN对鼠标的滚轮事件的介绍：

MDN对鼠标滚轮事件的实现：

/*
* 鼠标滚轮事件
* @return   void
* */
function mouseWeel() {
    var prefix = "", 
        _addEventListener, 
        onwheel, 
        support;

    if (window.addEventListener) {
        _addEventListener = "addEventListener";
    } else {
        _addEventListener = "attachEvent";
        prefix = "on";
    }

    // detect available wheel event
    support = "onwheel" in document.createElement("div") ? "wheel" : (// 各个厂商的高版本浏览器都支持"wheel"
              (document.onmousewheel !== undefined) ? "mousewheel" : // Webkit 和 IE一定支持"mousewheel"
              "DOMMouseScroll"); // 低版本firefox

    function _addWheelListener( elem, eventName, callback, useCapture ) {
        elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
            !originalEvent && ( originalEvent = window.event );

            // create a normalized event object
            var event = {
                // keep a ref to the original event object
                originalEvent: originalEvent,
                target: originalEvent.target || originalEvent.srcElement,
                type: "wheel",
                deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
                deltaX: 0,
                deltaZ: 0,
                preventDefault: function() {
                    originalEvent.preventDefault ?
                        originalEvent.preventDefault() :
                        originalEvent.returnValue = false;
                }
            };

            // calculate deltaY (and deltaX) according to the event
            if ( support == "mousewheel" ) {
                event.deltaY = - 1/40 * originalEvent.wheelDelta;
                // Webkit also support wheelDeltaX
                originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
            } else {
                event.deltaY = originalEvent.detail;
            }

            // it's time to fire the callback
            return callback( event );

        }, useCapture || false );
    }

    return function( elem, callback, useCapture ) {
        _addWheelListener( elem, support, callback, useCapture );

        // handle MozMousePixelScroll in older Firefox
        if( support == "DOMMouseScroll" ) {
            _addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
        }
    };
}

如果是上下滚动的满屏，则使用deltaY，如果向上则该值为负数，否则为正数。

满屏滚动实现：
1首先HTML创建数个块级元素，推荐使用ul>li(更加具有语义化)。
2使用css将每个表示一屏元素都沾满整屏，然后给切换的屏幕时添加动画。你应该隐藏页面的滚动条，否则话页面滚动的不是一屏，而是多了一段距离。你可以还是用下面的方法隐藏滚动条

body{
    overflow: hidden;
}

3监听鼠标滚轮的事件，如果向下，则滚动到下一屏，否则滚动到上一屏
4如果你给页面添加关于每一屏的导航栏，则需要给导航栏添加点击事件

"use strict";

domLoad('load',function () {
    /**
     * 满屏滚动的类
     * @param   void
     * @rerurn   void
     */
    function MaxScreen () {
        this.el = document.querySelector(".nav .wrapper");
        this.navEls = this.el.querySelectorAll(".item");
        this.pageEl = document.querySelector(".pages-wrapper");
        this.activeIndex = 0;
        this.navClassList = null;
        this.pageClassList = null;
        this.item = null;
    }

    MaxScreen.prototype = {
        constructor: MaxScreen,
        init: function() { //启动函数
            this.setNavsClickEvent();
            this.setMouseWheelEvent();
        },
        setNavsClickEvent: function() { //设置导航的点击事件
            var _self = this;
            // 使用事件委托的方式给导航项的容器添加点击事件
            addEvent(_self.el, 'click', function(event) {
                var item = event.srcElement || event.target,
                    index = parseInt(item.getAttribute("data-index"));

                _self.switchPageAndNavState(index);
            });

        },
        opearaClassName: function(elem, opeara, name){ //操作HTML元素的类名
            if (!checkType.isElement(elem) || !checkType.isString(opeara) || !checkType.isString(name)) {
                return null;
            }
            var classList = elem.classList;
            if (opeara === 'remove') {
                if (classList.contains(name)) {
                    classList.remove(name);
                }
            } else if (opeara === 'add') {
                if (!classList.contains(name)) {
                    classList.add(name);
                }
            }
        },
        switchPageAndNavState: function(index) { //切换页面和导航的状态
            print('switchPageAndNavState', {
                'index': index
            });
            var _self = this,
                len = _self.navEls.length ? _self.navEls.length:0,
                parentEl,
                pageEls;

            if (isNaN(len) || (len < 1)) {
                return ;
            }
            if (isNaN(index) || (index < 0) || (index > (len - 1))) {
                return;
            }
            pageEls = _self.pageEl.querySelectorAll('.page');
            // 删除原来有active类名的导航项
            parentEl = _self.navEls[_self.activeIndex];
            _self.opearaClassName(parentEl, 'remove', 'active');
            // 给现在点击的导航项添加active类名
            parentEl = _self.navEls[index];
            _self.opearaClassName(parentEl, 'add', 'active');
            // 删除原来有active类名的页面容器
            _self.opearaClassName(_self.pageEl, 'remove', 'active' + (_self.activeIndex + 1));
            _self.opearaClassName(pageEls[_self.activeIndex], 'remove', 'active');
            // 给现在点击的导航项对应的页面容器添加active类名
            _self.opearaClassName(_self.pageEl, 'add', 'active' + (index + 1));
            _self.opearaClassName(pageEls[index], 'add', 'active');
            // 保存本次点击的导航项的下标
            _self.activeIndex = index;
        },
        setMouseWheelEvent: function() { //添加鼠标滚轮是事件
            var _self = this,
                len = _self.navEls.length ? _self.navEls.length:0,
                index = 0;

            function wheelEvent(event) {
                var scrollDir = event.deltaY > 0? 1:-1;


                /**
                 * 如果页面向下滚动，滚动下一个页面的状态（index++）
                 * 如果页面向上滚动，滚动上一个页面的状态（index--）
                 */

                if (scrollDir > 0) {
                    index = Math.min(++index, len);
                } else {
                    index = Math.max(--index, 0);
                }

                _self.switchPageAndNavState(index);
                // setPageScoll(0, index * pageHeight);

                print('addWheelListener', {
                    'scrollDir': scrollDir,
                    'index': index
                });
            }
            var _throttle = throttle(wheelEvent);

            // 给页面容器添加鼠标滚动事件
            addWheelListener(_self.pageEl, function(event) {
                _throttle(event);
                // wheelEvent(event);
            }, false);
        },
    };

    var maxScreen = new MaxScreen();
    maxScreen.init();
});

这里有几个要点
1.使用事件委托的方式给导航栏添加监听事件。
2.通过data-*自定义属性标记导航栏各个导航项。
3.使用闭包保存上一次点击的导航项的标识（activeIndex）。
4.使用节流函数减少鼠标滚轮事件的触发。

最后

以上就是自由超短裙为你收集整理的鼠标滚轮事件以及满屏滚动实现的全部内容，希望文章能够帮你解决鼠标滚轮事件以及满屏滚动实现所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。