首页 新闻 搜索 专区 学院

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>

厉害342的主页 厉害342 | 初学一级 | 园豆:2
提问于:2020-04-16 20:32
< >
分享
所有回答(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
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册