html 禁用鼠标滚轮对网页滚动条的控制
0
悬赏园豆：200
[待解决问题]
现在想做一个效果，当进入网页鼠标滚动后会播放一个动画，在动画播放期间，禁止鼠标滚轮对滚动条的控制，等动画播放结束以后，恢复控制。类似特斯拉官网首页 滚轮滑动的界面切换效果（切换期间，不管滚轮如何滑动都没有效果，只有切换完毕后，滚轮才有效果）。
搜了好几个小时，没有管用的，求大神帮忙！！
问题补充：
我做的就是特斯拉官网首页的那个滑动切换效果 大神帮我看看咋禁用鼠标滚轮 或者麻烦给我看看大神的做法 就是特斯拉官网的！！万分感谢！！！！
<!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>
所有回答(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>
不知道你动画是用什么写的，所以用定时器模拟了一下控制。
我试一试 感谢
@厉害342: 乱的问题是animate跑的太多了。 animate是异步的，真的不好控制。 要根本解决的话，你要自己写动画(替换animate)的实现，用个链式调用，动画完后放开滚动条的禁用。
以上是我的思路。
水平有限，或许有别的方法。
@练涛: 好吧 我再等等看看还有啥方法没有
感谢支招
@厉害342: 有个方法，每次触发滚动事件就判断scrollTop时候到了animate的目标值，这样控制滚动条的禁用。。你的目标值每次运动完要更新到下一个目标的值。
挺笨的，到简单粗暴
@练涛: 那个只是给定滚动条位置的 就算没到目标值 鼠标滚轮还是可以控制滚动条的自由变换吧
