BOM-window

BOM(Browser Object Model) is the interface between JS and Browser window

Special effects related to browser resizing and scrollbars all rely on BOM technology

The window object

The window object is the window in which the JS script is currently running, and this window contains the DOM structure. The window.document property is the Document object

In tabbed browsers, each TAB has its own Window object; That is, the tabs of the same window do not share a Window object

Global variables are properties of the window

Global variables become properties of the window object

    var a = 10;
    console.log(window.a == a );//true
Copy the code

This means that multiple JS files share global scope, i.e. js files have no scope isolation

The built-in functions are generally window methods

Built-in functions such as setInterval() and alert() are commonly window methods

Window size related properties

To get a window width that does not include scroll bars, use the

document.documentElement.clientWidth

 <style>
        /* Makes the window scroll bar */
        body{
            height:5000px;
        }
    </style>



<script>
        console.log('Window width (including scroll bar)'.window.innerWidth);
        console.log('Window width'.window.outerWidth);
        console.log('Window width (excluding scrollbars).document.documentElement.clientWidth);
    </script>
Copy the code

The resize event

The resize event is emitted when the window size changes. You can bind the event handler using window.onresize or window.addeventListener (‘resize’)

  <script>
        // Listen for window resize events
        window.onresize = function(){
        // The root element takes the window out
            var root = document.documentElement;
            console.log('Window has changed size',root.clientWidth,root.clientHeight);
        }
    </script>

Copy the code

Rolled height

The window.scrollY property represents the vertically scrolled pixel value

Document. The documentElement. ScrollTop properties also said window has scroll height

// Short circuit operation, even if the preceding or operation does not fetch the following is fetching

var scrollTop = window.scrollY || document.documentElement.scrollTop
Copy the code

Document. The documentElement. ScrollTop is not read-only, can change the value; Window. scrollY is read-only

    <style>
        body {
            height:5000px;
        }
    </style>

 <script>
 / / can change the document in the console. The documentElement. ScrollTop values
        console.log(document.documentElement.scrollTop);
        console.log(window.scrollY); 
    </script>
Copy the code

Scroll event

After a window is rolled, the Scroll event will be raised. You can use window.onscroll or window.addEventListener(‘scroll’) to bind the event handler

 <style>
        body {
            height:5000px;
        }
    </style>
    
    
      <script>
        window.onscroll = function (){
            console.log('Window rolled up'.window.scrollY);
        };
    </script>
Copy the code