Scrolling is a common problem we have when we’re writing animations and things like that,

One, for page-level scrolling, the whole document, if it’s less than the height of the screen, then scrolling doesn’t happen, and if the height of the document is greater than the height of the screen, then we can scroll the page, and we’re scrolling document, The window is the shell that contains the Document. If we want to get the scroll distance, we can do it in two ways:

  1. window.scrollX
  2. document.documentElement.scrollTop

These two methods get the same rolling distance, but stand at different angles.

If we want to bind a callback to a scrolling event, we also have two options

  1. document.onscroll = (e) => console.log(e.target)
  2. window.onscroll = (e) => console.log(e.target)

There is no difference between the two methods, but e.target in both methods refers to a Document object, and you can think of the Scroll event triggered on the window as an event bubble

If we want to scroll the page to a location manually, there are two ways to do it

  1. window.scroll(x,y)/window.scrollTo(x,y)
  2. window.scrollBy(x,y)

The first method is to scroll directly to a certain coordinate, absolute displacement, scroll and scrollTo have the same effect, and the second method is relative displacement, the deviation from the previous position

If the height of a child element is greater than its fixed height, the scroll will appear inside the div. If the height of a child element is greater than its fixed height, the scroll will appear inside the div.

If we want to monitor the scroll event inside the div, we can add a listener to it: document.querySelector(‘# XXX ‘).onscroll = () => console.log(‘success’)

If we want to get its scroll distance: document.querySelector(‘# XXX ‘).scrollTop

If you add {height:100%} to an HTML element, the height of the HTML is not supported by the internal element, but is equal to the height of the browser. This is normal. Overflow: auto}, {height: 100%;}, {overflow: 100%;}, {overflow: 100%;}, {overflow: 100%; Overflow: hidden}, here it is normal again, the page cannot scroll. If you add {height: 100%; Overflow: hidden}, the scroll bar will appear inside the body. Adding the OnScroll event to the body is invalid, and binding the Scroll event to the window is invalid

For an element, it has its own box model, including magin, border, padding, width, and several different widths:

  1. OffsetWidth: contains border, padding, width
  2. ScrollWidth: contains padding, width
  3. ClientWidth: If the element width exceeds the screen width, then only part of the element is visible. This part of the element width is the element’s clientWidth, including width and padding

Example: the document querySelector (‘ # XXX). ScrollWidth

The height and width of the element are similar.

The viewable area of the browser also has a width and height. Sometimes we want the page to be adaptive across the screen of different devices. We can assign the width and height of the screen directly to the outermost element:

  1. window.innerWidth
  2. window.innerHeight

When the click event occurs, we can retrieve coordinates through some properties

  1. ScreenX /Y: The origin is the upper-left corner of the device screen
  2. PageX /Y: The origin is the upper-left corner of the page
  3. ClientX /Y: The origin is the upper-left corner of the region

document.body.onclick = e => console.log(e.clientX/Y)

If we want to get both the width and height of the element and its distance from the upper left corner of the viewable region, we can use the getBoundingClientRect() method, Details are available at https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

ScrollLeft is similar to scrollTop, but in different directions.

Some of the above APIS may involve the problem of whether to contain pseudo elements, pseudo classes and scroll bars. Since the situation is relatively rare, there is no classification here. If necessary, you can MDN yourself

Reference links:

CSSOM View mode (CSSOM View Module) related to sort out www.zhangxinxu.com/wordpress/2…