前景提要
html 禁用鼠标滚轮对网页滚动条的控制
0 悬赏园豆： 200 [待解决问题] 现在想做一个效果，当进入网页鼠标滚动后会播放一个动画，在动画播放期间，禁止鼠标滚轮对滚动条的控制，等动画播放结束以后，恢复控制。类似特斯拉官网首页 滚轮滑动的界面切换效果（切换期间，不管滚轮如何滑动都没有效果，只有切换完毕后，滚轮才有效果）。
搜了好几个小时，没有管用的，求大神帮忙！！ jquery html js 问题补充：我做的就是特斯拉官网首页的那个滑动切换效果 大神帮我看看咋禁用鼠标滚轮 或者麻烦给我看看大神的做法 就是特斯拉官网的！！万分感谢！！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.1.4.2.min.js"></script>
<script>
// $("body").on("touchmove", function(event) { // // event.preventDefault; // }, false); //然后点击取消或者确定时再取消body上的绑定 // // $("body").off("touchmove"); var i = 0; $('html,body').animate({ scrollTop: 0 }, 'slow'); // window.location.hash = "#yi_san"; var scrollFunc = function(e) { var e = e || window.event; if (e.wheelDelta) { if (e.wheelDelta > 0) { //当鼠标滚轮向上滚动时 // alert("鼠标滚轮向上滚动"); // alert(document.documentElement.scrollTop + "----" + i); if (i == 0) { i == 0; } else if (!document.documentElement.scrollTop <= 0) { i = i - 753; if ($(window).scrollTop() > 44) { $('html,body').animate({ scrollTop: i }, 'slow'); } } } if (e.wheelDelta < 0) { if (document.documentElement.scrollTop == 0) { $('html,body').animate({ scrollTop: 753 }, 'slow'); } // alert(123); // //当鼠标滚轮向下滚动时 //滚动条距离顶部的距离 else if ((document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight) >= 700 || i == 0 && i != 2259) { i = i + 753; if ($(window).scrollTop() > 44) { $('html,body').animate({ scrollTop: i }, 'slow'); } } } } else if (e.detail) { if (e.detail < 0) { //当鼠标滚轮向上滚动时 alert("鼠标滚轮向上滚动"); } if (e.detail > 0) { //当鼠标滚轮向下滚动时 alert("鼠标滚轮向下滚动"); } } } // 给页面绑定鼠标滚轮事件,针对火狐的非标准事件 window.addEventListener("DOMMouseScroll", scrollFunc) // 给页面绑定鼠标滚轮事件，针对Google，mousewheel非标准事件已被弃用，请使用 wheel事件代替 window.addEventListener("wheel", scrollFunc) // ie不支持wheel事件，若一定要兼容，可使用mousewheel window.addEventListener("mousewheel", scrollFunc) //控制图片放大 function fangda() { $("#kuang1").css({ "background-size": "200% 200%" }); } </script> <style> * { margin: 0px; padding: 0px; list-style: none; } #tesla { width: 100px; } #ol1 li { margin-top: 20px; float: left; margin-left: 20px; color: white; } #kuang { margin: 0 auto; width: 600px; } #biaotou { position: absolute; } a:hover { cursor: pointer; opacity: 0.5; } #ol2 li { float: right; margin-top: 20px; font-weight: 500; margin-right: 30px; color: white; } #kuang1 { height: 753px; overflow: hidden; width: 100%; background-position: center; transition: all 1s ease-in-out 0.5s; background-image: url("sucai/shouye/main_hero_homepage_desktopfu1.jpg"); background-repeat: no-repeat; background-size: 100% 100%; } #yi_er { height: 753px; width: 100%; background-image: url("timg.jpg") } #yi_san { height: 753px; width: 100%; background-color: red; } #yi_si { height: 753px; width: 100%; background-color: black; } </style>
</head>
<body onload="fangda()">
<div id="kuang1">
<div id="biaotou" style=" margin-top: 20px; background-image: url(sucai/shouye/tesila2fu.png);width: 100px;height: 20px; background-size: 100% 100%;
margin-left: 20px"></div>
<div id="kuang">
<ol id="ol1">
<li id="ModelS">
<a>Model S</a>
</p>
<p>
<a>Model 3</a>
</p>
<p>
<a>Model X</a>
</p>
<p>
<a>Model Y</a>
</p>
<p>
<a>Cybertruck</a>
</p>
<p>
<a>Roadster</a>
</p>
<p>
<a>Energy</a>
</p>
</ol>
</div> <div id="denglu"> <ol id="ol2"> <li style="transform: rotate(90deg) ">III</p> <p>登录</p> </ol> </div> <div style="clear: both"></div> </div> <div id="yi_er"> </div> <div id="yi_san"> </div> <div id="yi_si"> <span id="test6">123</span> </div>
</body>
</html> 厉害342 | 初学一级 | 园豆： 2
提问于：2020-04-16 20:32 显示帮助
使用"Ctrl+Enter"可进行快捷提交，评论支持部分 Markdown 语法：[link](http://example.com) _italic_ **bold** `code`。
< > 分享
分享您的问题
所有回答(1) 0 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>scroll test</title> </head> <body> <div id="div" style="height: 2000px;background-color: yellow;"> 111111111 </div> </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>
不知道你动画是用什么写的，所以用定时器模拟了一下控制。 练涛 | 园豆：3 (初学一级) | 2020-04-16 21:31 我试一试 感谢 支持( 0 ) 反对( 0 ) 厉害342 | 园豆：2 (初学一级) | 2020-04-16 21:33 @厉害342: 乱的问题是animate跑的太多了。 animate是异步的，真的不好控制。 要根本解决的话，你要自己写动画(替换animate)的实现，用个链式调用，动画完后放开滚动条的禁用。
以上是我的思路。
水平有限，或许有别的方法。 支持( 0 ) 反对( 0 ) 练涛 | 园豆：3 (初学一级) | 2020-04-16 22:15 @练涛: 好吧 我再等等看看还有啥方法没有
感谢支招 支持( 0 ) 反对( 0 ) 厉害342 | 园豆：2 (初学一级) | 2020-04-16 22:17 @厉害342: 有个方法，每次触发滚动事件就判断scrollTop时候到了animate的目标值，这样控制滚动条的禁用。。你的目标值每次运动完要更新到下一个目标的值。
挺笨的，到简单粗暴 支持( 0 ) 反对( 0 ) 练涛 | 园豆：3 (初学一级) | 2020-04-16 22:43 @练涛: 那个只是给定滚动条位置的 就算没到目标值 鼠标滚轮还是可以控制滚动条的自由变换吧 支持( 0 ) 反对( 0 ) 厉害342 | 园豆：2 (初学一级) | 2020-04-16 22:49 编辑文本 预览 上传图片
Ctrl+Enter键快速提交
清除回答草稿
您需要 登录 以后才能回答，未注册用户请先 注册 。
.png)
大数据引擎.png)
大数据应用.png)
大数据底层技术.png)
ForeSpider软件
.png)
采集服务.png)
软件学习.png)
智能分析.png)
特征提取.png)
智能计算.png)
数据可视化.png)
数据分析应用.png)
系统集成服务.png)
代码工具.png)
金融方案.png)
制造业&物流.png)
企业数字化.png)
医疗方案.png)
政务方案.png)
实时监测.png)
智能分析.png)
数据智能挖掘.png)
全网自动采集.png)
场景智慧采集.png)
主题识别采集
022-2345 2937
185 2247 0110
business@forenose.com
022-2345 2937
185 2247 0110
business@forenose.com
前嗅大数据
津公网安备12010102001008号