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

本文介绍了如何利用JavaScript处理鼠标滚轮事件来实现满屏滚动效果。通过监听滚轮事件,根据deltaY判断滚动方向,结合CSS布局和动画效果,确保每个屏幕元素占据一整屏。同时,文章提到了隐藏滚动条、使用事件委托为导航栏添加点击事件,以及利用data-*属性和闭包来管理状态,并通过节流函数优化滚轮事件的处理性能。
摘要由CSDN通过智能技术生成

MDN对鼠标的滚轮事件的介绍:
<code>这里写图片描述</code>
这里写图片描述

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 : 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值