JS怎样实现弹出层后，层能随鼠标滑轮能上下移动，页面不动？

弹出一个层，上面的内容较多，想用鼠标滑轮上下滑动的时候，层上下移动，但是页面不动。
请教一下。这个效果用原生JS要怎么写呀？谢谢大神们！

弹出层的时候给 body 增加样式 overflow:hidden 这个时候整个页面就不会滚动了
同时使用 @北去提到的给层增加 overflow-y：auto 这个时候层就可以滚动了

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #myPopUP{
            width:300px;
            height:300px;
            border:1px solid #cccccc;
            background-color: #ffffff;
            color:#000000;
            box-sizing: border-box;
            display: none;
        }
        #myPopUP .content{
            width:100%;
            height:250px;
            box-sizing: border-box;
            overflow:auto;
        }
        #myPopUP .actionBar{
            width:100%;
            height:50px;
            background-color: #cccccc;
            color:#000000;
            box-sizing: border-box;
            line-height: 50px;;
        }
    </style>
</head>
<input type="button" name="myButton"  id="myButton" value="POPUP">
<div id="myPopUP">
    <div class="content">
        <div style="background-color: #00a23f;width:100%;height:1000px;overflow: hidden">内容很多朵儿弧度第三方回送开放很舒服是SDK是</div>
    </div>
    <div class="actionBar">
        <div style="display: inline-block;float:right;margin-right:5px;"><input type="button" name="myCloseButton"  id="myCloseButton" value="Close" ></div>
    </div>
</div>
<div style="background-color: #1e83c9;widht:500px;height: 1000px;">
</div>
<script>

    var buttonDom=document.getElementById("myButton");
    var myPopUPDom=document.getElementById("myPopUP");
    var contentDom;
    var popupWidth=300;
    var popupHeight=300;

    buttonDom.addEventListener("click",function(){

        var fixedX=(document.documentElement.clientWidth-300)/2;
        var fixedY=(document.documentElement.clientHeight-300)/2;
        myPopUPDom.style.position="fixed";
        myPopUPDom.style.left=fixedX+"px";
        myPopUPDom.style.top=fixedY+"px";
        myPopUPDom.style.position="10px";
        myPopUPDom.style.display="block";
        document.body.style.overflow="hidden";
        myPopUPDom.setAttribute("popup","popup");

        contentDom= myPopUPDom.getElementsByClassName("content")[0];
        function closeHandler(event){
            myPopUPDom.style.display="none";
            document.getElementById("myCloseButton").removeEventListener("click",closeHandler,false);
            document.body.style.overflow="auto";
            contentDom=null;
        }

        document.getElementById("myCloseButton").addEventListener("click",closeHandler,false);

    },false);

    window.addEventListener("wheel",function(event){
        contentDom&&(contentDom.scrollTop=contentDom.scrollTop+event.deltaY)
    },false);

</script>
</body>
</html>

监听鼠标滚轮事件，触发 dom 元素的移动就可以了吧

弹出的层固定定位，设置宽高，然后overflow-y：auto 试试。

【热门文章】