`

js 禁止鼠标滑轮滚动的事件

阅读更多

如题,代码如下:

 

// left: 37, up: 38, right: 39, down: 40,
    // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
    var keys = [37, 38, 39, 40];

    function preventDefault(e) {
        e = e || window.event;
        if (e.preventDefault)
            e.preventDefault();
        e.returnValue = false;
    }

    function keydown(e) {
        for (var i = keys.length; i--;) {
            if (e.keyCode === keys[i]) {
                preventDefault(e);
                return;
            }
        }
    }

    function wheel(e) {
        preventDefault(e);
    }

    function disable_scroll() {
        if (window.addEventListener) {
            window.addEventListener('DOMMouseScroll', wheel, false);
        }
        window.onmousewheel = document.onmousewheel = wheel;
        document.onkeydown = keydown;
    }

    function enable_scroll() {
        if (window.removeEventListener) {
            window.removeEventListener('DOMMouseScroll', wheel, false);
        }
        window.onmousewheel = document.onmousewheel = document.onkeydown = null;
    }

 

分享到:
评论

相关推荐

    js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)

    本文将深入探讨如何在不同的浏览器环境中绑定鼠标的滑轮滚动事件,并提供一个兼容主流浏览器的简单实例。 首先,我们需要理解鼠标滚轮事件的基本概念。在JavaScript中,这个事件通常分为两种类型:`onmousewheel`...

    滚动条响应鼠标滑轮事件实现上下滚动的js代码

    在JavaScript中,实现鼠标滚轮事件来控制滚动条上下滚动是一项常见的需求,特别是在网页交互设计中。这个功能可以通过监听浏览器的特定事件并处理这些事件来完成。以下将详细讲解如何利用JavaScript实现这一功能。 ...

    perfect scrollbar jQuery鼠标滚轮滚动事件

    在"perfect scrollbar jQuery鼠标滚轮滚动事件"中,我们将探讨如何利用这个插件来处理鼠标的滚轮滚动事件,以及它与jQuery的交互。 首先,我们需要了解Perfect Scrollbar的基本使用方法。在引入jQuery库和Perfect ...

    鼠标滚动事件动画.zip

    综上所述,"鼠标滚动事件动画.zip"是一个结合了JavaScript事件处理、CSS3动画、响应式设计和性能优化的示例,展示了如何通过jQuery实现一个酷炫的网页交互效果。对于想要学习和提升前端交互设计技能的开发者来说,这...

    openlayers的鼠标滚轮事件

    ### OpenLayers中的鼠标滚轮事件控制 #### 一、引言 在Web地图应用开发过程中,用户交互体验是至关重要的一个方面。OpenLayers作为一个强大的开源JavaScript库,为开发者提供了丰富的功能来实现各种地图操作,包括...

    jquery监听鼠标滚轮事件+js监听滚轮事件

    本篇将详细介绍如何使用jQuery和原生JavaScript实现鼠标滚轮事件的监听。 一、jQuery监听鼠标滚轮事件 jQuery库提供了一种简洁的方式来处理DOM元素上的事件,包括滚轮事件。要监听滚轮事件,可以使用`$(element)....

    js实现图片的滑轮滚动放大预览、拖动、旋转

    在JavaScript(JS)中,实现图片的滑轮滚动放大预览、拖动和旋转功能是一项常见的交互设计任务,尤其在网页开发中应用广泛。这项功能可以让用户更直观、更自由地查看图片细节,提高用户体验。以下将详细讲解如何实现...

    JS鼠标滚轮水平滚动特效.zip

    "JS鼠标滚轮水平滚动特效"就是这样一个解决方案,它利用JavaScript编程语言实现了鼠标滚轮控制的水平滚动功能,让用户在浏览时可以像操作传统垂直滚动条一样方便地浏览横向排列的内容。 这个特效的核心是通过监听...

    jQuery鼠标滚动事件动画 jQuery鼠标滚动事件动画宣传页面.zip

    本项目"jQuery鼠标滚动事件动画 jQuery鼠标滚动事件动画宣传页面.zip"是利用jQuery实现的一种交互效果,特别是针对鼠标滚动事件的处理,用于创建动态且吸引人的宣传页面。这个压缩包包含了一个基于HTML5、CSS和...

    57、Jquery鼠标滚动事件动画

    本知识点将深入探讨如何利用jQuery实现鼠标滚动事件的动画效果。首先,我们来理解什么是鼠标滚动事件。 鼠标滚动事件是用户操作浏览器时触发的一种事件,通常发生在用户滚动页面时。在jQuery中,我们可以使用`$...

    js 前端鼠标拖动事件实例

    这个实例主要涉及的关键词是“js”(JavaScript)、“ASP”(尽管在这个上下文中并不直接相关,但可能是用户提及的一个相关技术栈)、“web”(Web开发)以及“鼠标事件”。我们将重点讲解JavaScript中的鼠标拖动...

    ul列表中图片滚动JS,鼠标控制滚动

    - JavaScript事件监听,如`mousemove`事件 - 使用JavaScript操作DOM元素的属性,如`scrollLeft` - 计算和限制滚动范围 通过这些技术,我们可以创建出一个用户友好的图片滚动展示,增强了网页的交互性和观赏性。

    js监听滚动条滚动事件使得某个标签内容始终位于同一位置

    小知识点,废话不多说,直接上代码 css: 代码如下: ”code” class=”css”>&...</pre><br> js: 代码如下: ”code” class=”javascript”>var auchorTop = $(“#anchor”).css(“top”); auchorTop = Number(auchorTo

    js可随鼠标拖拽滚动的3D标签球

    在这个3D标签球中,JavaScript监听鼠标的移动和拖拽事件,然后根据这些事件更新3D场景中的标签位置,使得用户可以自由地旋转和滚动标签球。 ECMAScript是JavaScript的标准化规范,它的最新版本(ES6及以上)引入了...

    js 无缝滚动,鼠标放上去暂停代码

    ### JS 无缝滚动,鼠标放上去暂停代码 在前端开发中,实现文本或图片的无缝滚动效果是非常常见的需求之一,特别是在新闻网站、广告横幅等场景下。这种效果不仅可以提升用户体验,还能增加页面的吸引力。本文将详细...

    滑轮滚动图片跟随放大缩小

    总的来说,"滑轮滚动图片跟随放大缩小"是一个结合了JavaScript事件处理、CSS3动画和响应式设计的网页交互效果,它提升了网页的视觉吸引力,同时也对开发者提出了更高的技术和性能优化要求。通过深入理解和实践,我们...

    js焦点图片滚动切换插件标题和图片切换滚动

    在本文中,我们将深入探讨与“js焦点图片滚动切换插件”相关的知识点,包括原理、实现方式、常见问题及优化策略。 一、工作原理 焦点图片滚动切换插件主要基于JavaScript和CSS技术,通过定时器(setTimeout或...

    GSAP.JS视差层鼠标滚轮特效.rar

    在这个“GSAP.JS视差层鼠标滚轮特效.rar”压缩包中,我们可以预见到一个使用GSAP.js实现的视差滚动效果。视差滚动是现代网页设计中一种流行的技术,它通过使背景元素以不同的速度移动,从而创造出深度感和沉浸式的...

    js 右侧图片随着鼠标滚动

    JavaScript事件处理 示例代码中的 `function cloleft();` 定义了一个函数,用于隐藏指定的DOM元素。这通常通过监听特定事件(如点击事件)并调用此函数来触发。 ### 二、实现滚动跟随效果 为了实现图片跟随鼠标...

Global site tag (gtag.js) - Google Analytics