`

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代码监听到并作出相应的响应。 不同浏览器对事件的处理方式有所不同。在IE、Opera和Chrome这些浏览器中,可以使用"mousewheel"事件来监听鼠标滑轮滚动;而在Firefox中...

    鼠标滚动事件动画.zip

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

    javascript实现禁止鼠标滚轮事件

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

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

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

    js 随鼠标滚动条滚动的div

    在JavaScript中,实现一个div元素随鼠标滚动条滚动的效果,主要涉及到两个关键概念:事件监听和CSS定位。这个效果常用于创建固定定位的侧边栏、头部导航等元素,即使页面滚动,它们仍然保持在视口中的特定位置。 ...

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

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

    57、Jquery鼠标滚动事件动画

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

    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动画和响应式设计的网页交互效果,它提升了网页的视觉吸引力,同时也对开发者提出了更高的技术和性能优化要求。通过深入理解和实践,我们...

    javascript鼠标事件大全

    ### JavaScript鼠标事件大全 在JavaScript编程中,鼠标事件是非常重要的交互元素之一,它们允许开发者捕捉用户的鼠标动作,并根据这些动作触发相应的脚本处理。本文将详细介绍JavaScript中的各种鼠标事件及其特性,...

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

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

    js鼠标滚动自动隐藏导航菜单.zip

    这种设计运用JavaScript技术,监听鼠标的滚动事件,根据滚动方向和距离动态改变导航菜单的可见性。 首先,我们来看JavaScript的基本概念。JavaScript是一种轻量级的解释型编程语言,主要应用于Web开发,用于实现...

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

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

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

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

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

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

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

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

    js 右侧图片随着鼠标滚动

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

    滚动条事件js代码

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

Global site tag (gtag.js) - Google Analytics