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

最新推荐文章于 2024-08-14 17:15:24 发布

babulongbo

最新推荐文章于 2024-08-14 17:15:24 发布

阅读量2.5k

点赞数

分类专栏： web开发笔记程序员笔记文章标签： javascript 鼠标滚轮事件满屏滚动

本文链接：https://blog.csdn.net/babulongbo/article/details/81222730

版权

本文介绍了如何利用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 :