html 禁用鼠标滚轮对网页滚动条的控制怎么实现

2020-12-29 11:46发布

6条回答
侯建平
2楼 · 2020-12-29 21:56

暴力型:

第一种:body 设置 scroll="no",存在兼容性

第二种:css设置overflow:hidden; 直接干掉滚动条

通用型:

第三种:给拥有滚动条的元素绑定滚轮事件,这里需要通过navigator.userAgent判断浏览器的类型,因为滚轮事件存在兼容性问题,html5新增加的wheel事件写法,通用的mouseWheel写法,ie低版本兼容写法DOMMouseScroll,绑定事件后,直接阻止浏览器默认动作即可e.preventDefault()或者return;


我是大脸猫
3楼 · 2020-12-30 14:42

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>scroll testtitle>head><body><div id="div" style="height: 2000px;background-color: yellow;">111111111div>    body><script>    function disabledMouseWheel() {        var div = document.getElementById('div');        //W3C       //未测试        if (div.addEventListener) {            div.addEventListener('DOMMouseScroll', scrollFunc, false);        }        //IE/Opera/Chrome  //chrome测试生效        div.onmousewheel = scrollFunc;    }        function scrollFunc(evt) {        evt = evt || window.event;        if (evt.preventDefault) {            // Firefox            evt.preventDefault();            evt.stopPropagation();        } else {            // IE            evt.cancelBubble = true;            evt.returnValue = false;        }        return false;    }        window.onload = disabledMouseWheel;//三秒后,恢复滚轮控制 //chrome下测试生效setTimeout(() => {    //IE/Opera/Chrome    div.onmousewheel = null; }, 3000);script>html>

summer
4楼 · 2020-12-31 19:04
function stopBubble(e) {
    //如果提供了事件对象,则这是一个非IE浏览器
    if (e && e.stopPropagation)
    //因此它支持W3C的stopPropagation()方法
    e.stopPropagation();
    else
    //否则,我们需要使用IE的方式来取消事件冒泡
    window.event.cancelBubble = true;
}
//阻止浏览器的默认行为
function stopDefault(e) {
    //阻止默认浏览器动作(W3C)
    if (e && e.preventDefault) e.preventDefault();
    //IE中阻止函数器默认动作的方式
    else window.event.returnValue = false;
    return false;
}


嘿呦嘿呦拔萝卜
5楼 · 2021-01-04 08:57

第一种:body 设置 scroll="no",存在兼容性

第二种:css设置overflow:hidden; 直接干掉滚动条

通用型:

第三种:给拥有滚动条的元素绑定滚轮事件,这里需要通过navigator.userAgent判断浏览器的类型,因为滚轮事件存在兼容性问题,html5新增加的wheel事件写法,通用的mouseWheel写法,ie低版本兼容写法DOMMouseScroll,绑定事件后,直接阻止浏览器默认动作即可e.preventDefault()或者return;

722
6楼 · 2021-02-22 10:01

暴力型:

第一种:body 设置 scroll="no",存在兼容性

第二种:css设置overflow:hidden; 直接干掉滚动条

通用型:

第三种:给拥有滚动条的元素绑定滚轮事件,这里需要通过navigator.userAgent判断浏览器的类型,因为滚轮事件存在兼容性问题,html5新增加的wheel事件写法,通用的mouseWheel写法,ie低版本兼容写法DOMMouseScroll,绑定事件后,直接阻止浏览器默认动作即可e.preventDefault()或者return;


不学还会不
7楼 · 2021-03-12 09:04

使用overflow:hidden禁用body / div上的滚动条。

然后,您将mousewheel事件绑定到一个函数,该函数将更改scrollTopdiv以模拟滚动。

对于箭头键,则可以将绑定keydown识别箭头键的事件,然后更改scrollTopscrollLeft在适当的div来模拟滚动。


相关问题推荐

  • 回答 90

    现在有很多女生学习编程哦,尤其是前端,越来越多的女生学习,所以是合适的

  • 回答 13

    html插入图片有两种方式:一种是通过标签插入的正常的图片,另一种是通过>< style>问题分析:1、首先你是通过第二种方式插入的是背景图片,直接用width和height只能控制div的宽度和高度。2、如果你插入的图片是通过标签的方式来插入的话,可以通过自身的属性...

  • 回答 17

    html添加图片的方法如下:1、打开html软件。2、导入项目。3、找到要添加图片的位置。4、写【imgsrc=图片路径】即可。

  • 回答 2

    1、默认状态下,背景会延伸到边框的区域下层2、可以通过 background-clip 属性来调整上述默认行为所带来的不便;这个属性的初始值是 border-box, 意味着背景会被元素的 border box(边框的外沿框) 裁切掉实现半透明边框代码如下:body {         ...

  • 回答 9

    html图片对齐主要用text-align属性来控制:text-align的值主要又分为:left左对齐,center居中对齐,right靠右对齐。

  • 回答 8

    你没有设置好,具体解决方法如下。输入如下代码:width表示宽度height表示高度下图所示,我将图片的宽和高通通缩小,可以看到,图片的尺寸果然按照我的意愿进行了改变。

  • 回答 6

    设置表格单元格的外边距为0        css中设置border-collapse: collapse;       或者在table标签中写cellspacing=0px

  • 回答 5
    已采纳

    br是强制换行的,一般用在段落文字里边的换行。

  • 回答 6

    1. 原生。直接告诉你,开发太慢,不能跨平台,先不要学。2. 使用WebView的hybrid app,Cordova/ionic 这些。就是用浏览器运行html,js,css仿app,我用了好几年,学习快,开发块,跨平台。问题是每个安卓版本/苹果版本/浏览器版本运行效果不一致,有些版本还运...

  • 回答 8

    常用的移动APP开发框架:1、框架:PhoneGapPhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。优点:可跨平台。phonegap框架帮我们解决了差异性,javascript与平台系统的连接由phonegap框架完成。    提供硬件访问控...

  • 回答 6

      1. LungoJS  这个是被认为开发移动网站最好的HTML5开发框架,使用 HTML5/CSS3 和 JavaScript 技术。可帮助创建基于 iOS、 Android、 Blackberry 和 WebOS 平台的应用程序。该框架可利用当前移动设备的高级特性,可捕捉事件包括滑动、触屏、长按等。无需...

  • 回答 11

    应该是样式不一样造成的

  • 回答 5

    1、使用meta标签:viewportH5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。viewport 是用户网页的可视区域。翻译为中文可以叫做视区。手机...

  • 回答 3

    就是标签上的一个属性,比如:js获取的时候是:obj.getAttribute(data-type);做一些逻辑操作或者唯一标示等,很方便的。

  • 回答 5

    src标签中放的是你的图片的路径,其中可以使用相对路径和绝对路径,相对路径就是你的图片在电脑中的存放位置,绝对路径就是指一些网站地址。alt标签中可以输入文本,当图片的路径错误时就会显示该文本内容。title标签中的值也是文本,当你鼠标悬停是所显示的...

没有解决我的问题,去提问