屏蔽wheelscroll

大智若愚- 仅屏蔽document，不屏蔽弹窗内部scroll

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scrollWheel demo</title>
</head>
<body>
   <div id="load">
    <form>
        <!--表单框-->
        <div id="message"><div id="texts">表单</div></div>
        <!--登陆按钮-->
        <div ><input type="button" onclick="hideOverlay()" id="button" value="确定"></div>
    </form>
</div>
<!--遮罩框-->
<div id="overlay"></div>
    
    
</body>
</html>

CSS

#overlay {
        background: #000;
        filter: alpha(opacity=50); /* IE的透明度 */
        opacity: 0.5;  /* 透明度 */
        
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 100; /* 此处的图层要大于页面 */
       
    }

        #load{
            position:absolute;
            top:50%;
            left:50%;
            z-index:-1;
            width: 300px;
            z-index: 200;
            height: 230px;
            margin: -150px 0 0 -150px;
            background:white;
            border-radius: 2px;;
            vertical-align: middle;
          display:none;
        }

        #message{
            color:rebeccapurple;
            text-align: center;
            width: 300px;
            height:180px;
        }

        #button{
            width: 300px;
            height: 50px;
            background:orange;
        }

JavaScript

/* 显示遮罩层 */
    function showOverlay(){
        $("#load").show()
        $("#overlay").css("width",$(document).width())
        $("#overlay").css("height",$(document).height())

// fadeTo第一个参数为速度，第二个为透明度
        // 多重方式控制透明度，保证兼容性，但也带来修改麻烦的问题
        $("#overlay").fadeTo(200, 0.5);
    }
    /* 隐藏覆盖层 */
    function hideOverlay() {
        $("#overlay").fadeOut(200);
        $("#load").hide()
    }
    showOverlay();