Common Requirements 1

1. Jump from page A to Page B (across pages) When you return to page A from page B, page A relocates its original focus

Implementation scheme:

Through the life cycle

BeforRouterLeave Records the offset

BeforRouterEnter Modifies the focus position

Common Requirements 2

Non-cross-page, jump to detail/edit page with tag, reposition and highlight the entry when you return to the main list

Implementation scheme:

The principle is the same as scheme 1: click details to record the offset position and return to onClose when the page scrolls

Note at this point that $nextTick must have the window. Scroll execution loaded after the page has been rendered

Highlight implementation:

Idea 1: Record the selected row ID, assign it a class style, and highlight it

Highlight-current-row =”true”; highlight-current-row=”true”

Idea 1: Advantages can be customized highlighting styles, disadvantages and when to unhighlight, fade in and out, etc

Using element native events, highlight-current-row=”true” automatically highlights when clicking on one line, native style, clicking on another line, highlighting disappears

Extension:

A browser warning appears while the page is scrolling

Added non-passive event listener to a ask-blocking ‘mousewheel’ event. Consider marking event handler as’ passive ‘to Make the page more responsive.

Adds a non-passive event listener to the scroll blocking “mouse wheel” event. Consider marking event handlers as “passive” to make pages more responsive

Chrome detects better performance when given specific attributes. There’s no way to verify.

Solution:

npm i default-passive-events -S

Import ‘default-muster-events’ from main.js

Also found a fix for jumping back to highlight-current-row=”true” highlighting that quickly disappears

Common Requirements 3

Search for an element, and the page is located there

Implementation approach

Dynamically add an ID to the element, obtain the id value of the element, and calculate the offset of the element. The window scrolls to this position

Expanding knowledge:

document.getElementById(‘#anchor5’).scrollTop; // The height of the content hidden after scrolling from the browser

document.getElementById(‘#anchor5’).offsetTop; // The top of the current element is closest to the parent document.getelementById (‘#anchor5’).clientheight; //clientHeight contains only the padding height document.getelementById (‘#anchor5’).offsetheight; //offsetHeight includes padding, border, horizontal scrolling but not margrin

Document.getelementbyid (selector).getBoundingClientRect().top // The position of the page from the top of the element

Distance of a page element from the top of the browser workspace = element offset from the top of the document – the height at which the page is rolled up

Page elements from the distance = DOM element object. At the top of the browser workspace offsetTop – document. DocumentElement. ScrollTop

The distance between the page element and the top of the browser workspace = DOM element object.getBoundingClientRect ().top;

GetBoundingClientRect is recommended, everything else is junk

Implement the scroll

document.getElementById(‘#anchor5’).scrollIntoView(true)

For this scheme, the entry parameter is false bottom true top

Example:

  1. var element = document.getElementById(“box”);

  2. element.scrollIntoView();

  3. element.scrollIntoView(false);

  4. element.scrollIntoView({block: “end”});

  5. element.scrollIntoView({behavior: “instant”, block: “end”, inline: “nearest”});

The solution does not do a good job of supporting center and scrolling animation. If there are many requirements, it is recommended to use window.Scroll native

Example center calculation

   top = document.getElementById(selector).getBoundingClientRect().top + document.documentElement.scrollTop - window.innerHeight / 2;
   window.scroll({
       top: top,
       left: 100,
       behavior: 'smooth'
   });
Copy the code