BOM screen width and height

1. Adjust the window size property

window.onresize is a window resize loading event, which is called when triggered <!DOCTYPE html>

The size of the browser's viewable window

1. Internal width and height

(1) Bulk

properties (compatibility)

innerWidth the width of the current screen

innerHeight current screen height

clientWidth the width of the current screen

clientHeight current screen height


(2) Browser window encapsulation


2. Scroll bar moving size 

1. Bulk

high

        document.documentElement.scrollTop

        document.body.scrollTop

        Pixels to scroll down

width

        document.documentElement.scrollLeft

        document.body.scrollLeft

        Pixels to scroll the scroll bar to the right

<script>

        console.log(document.documentElement.scrollTop,document.body.scrollTop);
        console.log(document.documentElement.scrollLeft,document.body.scrollLeft);
</script>

2. Scroll bar mobile size package

<body>
    <div></div>
    <script>
        function scoll(){
            return{
                top:document.documentElement.scrollTop||document.body.scrollTop,
                left:document.documentElement.scrollLeft||document.body.scrollLeft,
            }
        }
        console.log( scoll().top);
        console.log( scoll().left);
    </script>
</body>

                

Guess you like

Origin blog.csdn.net/weixin_68485297/article/details/124570713