`

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`...

    perfect scrollbar jQuery鼠标滚轮滚动事件

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

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

    鼠标滑轮滚动就是一个事件,它可以被JavaScript代码监听到并作出相应的响应。 不同浏览器对事件的处理方式有所不同。在IE、Opera和Chrome这些浏览器中,可以使用"mousewheel"事件来监听鼠标滑轮滚动;而在Firefox中...

    鼠标滚动事件动画.zip

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

    javascript实现禁止鼠标滚轮事件

    在这篇文章中,主要介绍了使用JavaScript禁止鼠标滚轮事件的技术细节,对于前端开发者来说,这是一个相当实用的技巧,尤其是在需要定制化页面交互行为时。下面将详细解释文章中的核心知识点。 首先,文章提到,在...

    js银河特效,点击变换颜色,滑轮滚动放缩大小,鼠标长按拖动翻转,优秀源代码

    js银河特效,点击变换颜色,滑轮滚动放缩大小,鼠标长按拖动翻转,优秀源代码 js银河特效,点击变换颜色,滑轮滚动放缩大小,鼠标长按拖动翻转,优秀源代码 js银河特效,点击变换颜色,滑轮滚动放缩大小,鼠标长按...

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

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

    57、Jquery鼠标滚动事件动画

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

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

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

    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

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

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

    js 特效 html 特效 鼠标改变滚动条

    js 特效 html 特效 鼠标改变滚动条 js 特效 html 特效 鼠标改变滚动条

    弹框后禁止遮罩层后面页面滚动(兼容ios和android).zip

    1. 监听弹框的打开事件:在弹框显示之前,通过JavaScript获取页面的滚动元素(通常是body),并将其scroll和touchmove事件禁用,同时记录下当前的滚动位置。 2. 修改CSS样式:将body或主要内容区域的`overflow`属性...

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

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

    js 右侧图片随着鼠标滚动

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

    滚动条事件js代码

    本知识点主要围绕"滚动条事件js代码",关注如何在不同浏览器中实现滚动到底部的事件监听,并涉及到`onscroll`、`scrollTop`、`scrollHeight`和`clientHeight`等关键属性和方法。 首先,`onscroll`事件是HTML元素上...

    js+实现+滚动的表格

    然后,我们用JavaScript来处理滚动事件,特别是当表格滚动到底部时,可以加载更多数据。这可以通过监听滚动事件 (`scroll` 事件) 来实现: ```javascript let tableContainer = document.querySelector('.table-...

    js表格无缝滚动效果

    为了提供更好的用户体验,可以采用JavaScript(js)来实现表格的无缝滚动效果,让表格像一个无边界的容器一样平滑滚动。这种效果在大数据量的展示或者长表格中尤其有用,它能让用户更容易地浏览和查找信息。 首先,...

    滑轮新闻滚动代码

    总之,“滑轮新闻滚动代码”是网页动态效果的一种常见实现,通过JavaScript的DOM操作、定时器、事件监听等技术,结合CSS样式设计,可以创建出吸引用户的新闻滚动效果。不断学习和实践,你也能掌握这项技能,为你的...

Global site tag (gtag.js) - Google Analytics