Results show

The following is actually quite common on the web, whether PC or mobile

Three houses

1.1. Properties

Note:

  • The box model is not set. Width refers to the content width, which is the padding inside
  • Returns a numeric type without px units
  • ScrollTop and scrollLeft can be changed (without listening for onscroll events). Do not use variable assignment first to change the value of a variable, but also need to reassign the value back, directly assign the value.document.documentElement.scrollTop= neirongList[i].offsetTop
  • Only left and top

1.1.1. Offset family (offset values, the whole box is independent of the content)

Gets the true width, height and position of the element ‘itself’ (regardless of the content)

  • OffsetWidth/offsetHeight: Get width+padding+border
  • OffsetLeft/offsetTop: Gets the distance from the left/upper outer border to the left/upper inner border of the parent element.

1.1.2. Scroll family (scroll values, related to content)

Gets the true width, height and position of the element’s ‘content’

  • ScrollWidth/scrollHeight: Gets the width and height of the content (including padding, including hidden or scrollbar hidden content, i.e., the entire content)
  • ScrollLeft: the distance from the left most of the content to the left inner border (including the border) (can be changed)
  • ScrollTop: the distance from the top of the content to the top inner border (including the border) (variable)

Remember: scrollLeft and scrollTop are how far the scrollbar scrolls

Always remember that the distance the box moves is the distance the page scrolls

1.1.3. Client family (visible area/viewport/all content that can be seen by the client/agent)

Gets the width, height and position of the element’s viewable area (including padding)

  • ClientWidth/clientHeight: Viewable area size
  • ClientLeft/clientTop: viewable area position (i.e. border-left left border and border-top width)

ClientWidth does not include the width of the scroll bar but the width of the content (plus padding)

1.2. Get the scrolling distance of the web page

To get the page scroll distance, register the OnScroll event for the window. Remember the following fixed syntax

  1. To register a scrolling event for a page, look for window:window.onscroll
  2. To get the scrolling distance of a page, look for HTML:document.documentElement.scrollTop

Page events (many browser kernels support Windows as an entire window) :

  • Window. onmousemove Mouse move
  • Window. onscroll (remember to take the HTML scroll distance) scroll the page
  • Window. onresize Monitors the viewport size of the page
Window.onscroll = function () {// Get the page scrolling distance of the HTML tag scrollTop console.log(document.documentElement.scrollLeft,document.documentElement.scrollTop)Copy the code

Remember that scrollTop and scrollLeft can be changed to change the automatic scrolling distance of the page without binding onScroll event

The elevator navigation

After careful analysis of the page, there are only two interactive events. One is to click each list item on the left and jump to the corresponding position on the right; the other is to scroll the page and scroll the corresponding distance. The list item on the left should have the corresponding list item change

Event 1: Click each list on the left to jump to the corresponding position on the right

  1. Exclusive thought modifies style: Class name exclusive active
  2. Scroll to the subscript consistent box position:
  • Page scrollingdocument.documentElement.scrollTop
  • The box locationneirongList[i].offsetTop

Event 2: When the right box is scrolling, you need to listen for the scroll distance, so that the left navigation bar changes to listen for the scroll distance, compared with each box offsetTop, in the left side of the scope class with the class name

/ / on the left side of the event let itemList = document. QuerySelectorAll (') value. The item '), NeirongList = document. QuerySelectorAll (' content. neirong ') / / register event for (let I = 0; i < itemList.length; i++) { itemList[i].onclick = function () { document.querySelector('.item.active').classList.remove('active') Enclosing classList. Add (' active ') document. The documentElement. The scrollTop = neirongList [I] offsetTop}} / / event window on the right side. The onscroll =  function () { let scrollDistance = document.documentElement.scrollTop for (let i = 0; i < neirongList.length; I ++) {if (scrollDistance < neirongList[I].offsetTop + 100) { document.querySelector('.item.active').classList.remove('active') itemList[i].classList.add('active') // Once the first box is found with a position larger than the scrolling distance of the page, it must break to end the loop break}}}Copy the code

When monitoring the scrolling distance, sometimes pages will add 100 to the offsetTop, so that the first box is covered a bit before jumping to the second box