js实现弹窗滚动背景页面不跟随滚动

js实现弹窗滚动背景页面不跟随滚动

<script>
        function getScrollOffset() {
            if (window.pageXOffset) {
                return {
                    x: window.pageXOffset,
                    y: window.pageYOffset
                }
            } else {
                return {
                    x: document.body.scrollLeft || document.documentElement.scrollLeft,
                    y: document.body.scrollTop || document.documentElement.scrollTop
                }
            }
        };
        var scrollT = null;
        var LastScrollT = 0;
        window.onscroll = function (e) {
            scrollT = getScrollOffset().y;  //滚动条距离
        }
        $('.bg').on('touchmove', function () {
            event.preventDefault(); //阻止默认行为
            event.stopPropagation();  //阻止冒泡
        });

        $('.btn').click(function () {
            $('.alertBox,.bg').show()
            $("body").css({ "position": "fixed", "overflow": "hidden", "top": '-' + scrollT + 'px' });
            LastScrollT = scrollT;
        })
        $('.close,.bg').click(function () {
            $('.alertBox,.bg').hide()
            $("body").css({ "position": "static", "overflow": "auto", "top": '0px' });
            if (window.pageXOffset) {
                window.pageYOffset = LastScrollT;
            } else {
                document.body.scrollTop = LastScrollT;
                document.documentElement.scrollTop = LastScrollT;
            }
        })
    </script>

你可能感兴趣的:(js)