The official document is simple:

The Element interfacescrollIntoView()Method scrolls the element’s parent container to be calledscrollIntoView()Is visible to the user. Grammar:element.scrollIntoView();/ / is equivalent toelement.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean argumentselement.scrollIntoView(scrollIntoViewOptions); // Object parameters

First the container scrolls, then document.geyElementById or Document. querySelector gets the specified element, and the most important element calls scrollIntoView. Parameter alignToTop Optional Boolean value: If true, the top of the element will be aligned with the top of the visible part of the scroll area in which it is located. Corresponding scrollIntoViewOptions: {block: “start”, inline: “nearest”} This is the default value for this parameter. If false, the bottom of the element is aligned with the bottom of the visible area of the scroll area in which it is located. Corresponding scrollIntoViewOptions: {block: “end”, inline: “nearest”} ScrollIntoViewOptions Optional an object with the following properties: Behavior Optional defines the animation transition effect, one of “auto” or “smooth”. The default is “auto”. Block optionally defines vertical alignment, one of “start”, “Center “, “end”, or “nearest”. The default is “start”. Inline Optionally defines one of the horizontal alignment of “start”, “Center “, “end”, or “nearest”. The default is “nearest”.

Actually encountered in a VUE project, nothing works when an element that calls a child component scrolls into the viewable area by clicking on the event. As it turns out, this method has a limitation: it needs to be called after the page is fully loaded. In this case, you can use the $nextTick function in vue to make sure the page is rendered before calling scrollIntoView to scroll to the visible area.

showDatePicker(){
  if (this.$refs.pickers) {
        this.$nextTick(() => {
          this.$refs.pickers.showCurrentDate()
        })
      }
Copy the code

Child components:

  showCurrentDate() {
      this.$el.querySelector('.active').scrollIntoView({
        block: 'start',})// Return to the top
    },
Copy the code