ScrollIntoView is invalid in vue
The official document is simple
The scrollIntoView() method of the Element interface will scroll the element's parent container, making the element called scrollIntoView() visible to the user.
grammar:
(); // Equivalent to (true)(alignToTop);// Boolean type parameters(scrollIntoViewOptions);// ObjectType parameters
First, the container is scrolled, and then the specified element is obtained, which is the most sufficient element to call scrollIntoView.
parameter:
- alignToTop is optional
A Boolean value:
If true, the top of the element will be aligned with the top of the visible area in which it is located. Corresponding scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default value for this parameter.
If false, the bottom end of the element will be aligned with the bottom end of the visible area in the scroll area where it is located. The corresponding scrollIntoViewOptions: {block: "end", inline: "nearest"}.
- scrollIntoViewOptions Options
An object containing the following properties:
- behavior optional
Defines an animation transition effect, one of "auto" or "smooth". Default is "auto".
- block optional
Defines the alignment of the vertical direction, one of "start", "center", "end", or "nearest". Default is "start".
- inline optional
Defines the alignment of the horizontal direction, one of "start", "center", "end", or "nearest". Default is "nearest".
Actually encountered in a vue project, nothing is valid when the element of the subcomponent is called by clicking events to scroll to the visible area.
Finally found that this method has another limitation: the page needs to be fully loaded before calling it
In this way, you can use the $nextTick function in vue to ensure that the page has been rendered. De-click the scrollIntoView to scroll to the visible area
The implementation code is as follows
Parent component:
showDatePicker(){
if (this.$) {
this.$nextTick(() => {
this.$()
})
}Subcomponents:
showCurrentDate() {
this.$('.active').scrollIntoView({
block: 'start',
}) // Back to top },scrollIntoView invalidate in vue---kalrry
() method allows the current element to scroll into the visible area of the browser window.
(); // Equivalent to (true)(alignToTop); // Boolean type parameters(scrollIntoViewOptions); // ObjectType parameters
Parameters
alignToTop： onebooleanvalue
//true: equivalent to scrollIntoViewOptions: {block: "start", inline: "nearest"}//false: equivalent to scrollIntoViewOptions: {block: "end", inline: "nearest"}scrollIntoViewOptions： Object
behavior: Define animation overeffects， ‘auto / smooth' , default 'auto'
block：Define the alignment of the vertical direction， “start / center / end / nearest”。Default is “start”。
inline Define the alignment of the horizontal direction， “start / center / end / nearest”。Default is “nearest”question
According to the js standard selection method, scrollIntoView is invalid in vue
reason
This method needs to be fully loaded before it can take effect
solve
Method 1:
Use the setTimeout method
setTimeout(function(){
(target).scrollIntoView();
},100)Method 2:
Use this.$nextTick method in vue
this.$nextTick(()=>{
//Object mode setting scrolling status ("#01commonly").scrollIntoView({
block: 'end',
behavior: 'smooth'
})
})Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.