Trust me, there is no more complete description of scroll related properties!

This is the 25th day of my participation in Gwen Challenge.

Introduction to 👽

Scroll is very common, almost every page probably needs scroll. But we don’t use it very much, and when it comes to its properties, perhaps the most common is Overflow: Hidden. To tell the truth, I also use to not much, so we come together to catch up next lesson!

👽 Scroll in Window

👻 Related attributes

🙋 window.scrollx: Returns the horizontal scrolling pixel value of the current page (read only).

🙋 window.scrollY: Returns the value of pixels that have been scrolled vertically on the current page (read only).

👻 Related methods

🙋 window.scroll(): scrolls the page to the specified position.

window.scroll(x,y)// Scroll horizontally to x and vertically to y.

window.scroll({
  left: x,// Scroll the x position horizontally
  top: y,// Scroll vertically to position Y
  behavior: 'smooth'// Scroll behavior: 'smooth','instant'
})
Copy the code

🙋 window.scrollby (): Scrolls the page a specified distance.

window.scrollBy(x,y)// Horizontal scroll x distance, vertical scroll y distance.

window.scrollBy({
  left: x,// Horizontal scrolling x distance
  top: y,// Vertical scrolling y distance
  behavior: 'smooth'// Scroll behavior: 'smooth','instant'
})
Copy the code

🙋 window.scrollto (): same as window.scroll() without BB.

👽 Scroll in Element

👻 Related attributes

🙋 el. scrollHeight: Returns the total height of the current element (including the invisible scroll area) (read only).

🙋 el.scrollWidth: Returns the total width of the current element (including the invisible scroll area) (read only).

🙋 el. scrollLeft: Reads and writes the distance between the scroll bar and the leftmost element.

🙋 el. scrollTop: The distance between the read and write scrollbar and the top of the element.

👻 Related methods

🙋 el. onscroll: triggered when an element scrolls.

document.querySelector('body').onscroll = () = >{
  console.log('Rolling! ')}Copy the code

🙋 el.scroll (): scrolls elements to the specified position in the container. Window = window

🙋 el.scrollby (): Scrolls the element a specified distance within the container. Window = window

🙋 el.scrollto (): same as el.scroll () without BB.

👽 epilogue

Although called the most complete, but in fact some poor compatibility scroll attribute is not introduced. Finally, there may be a bit of scroll left: the scrollbar. This section is mainly about CSS, which we’ll cover in the next installment.