Case 1:
Due to project requirements, the content of the drawer pop-up window is relatively large, so in terms of style
使用 ::v-deep .el-drawer__body {
overflow: auto;
}Add a scrollbar to the component,
There was a problem:
Every time the drawer component is closed, the position of the scroll bar is not restored after opening again.
solve:
Add a layer of div outside the component for v-if dynamic loading, so that every time the dynamic value is false, this part of the dom element will be destroyed.
When true, the DOM structure will be re-rendered, and the position of the scroll bar will also be restored.
Case two:
In terms of requirements, let the drawer component contain the content for switching between pages,
question:
Every time you click the previous or next step, the position of the scroll bar does not change, for example, the position of the scroll bar on the previous page is 50
Then when you click to the next page, the scrolling distance should be 0 again!
solve:
By inspecting the elements, we know that the class name of the scrolling area is "el-drawer__body",
So we pass
document.querySelector(".el-drawer__body").scrollTo(0,0)
This line of code to fix the problem
explain:
document.querySelector: Get the class name node of el-drawer__body
scrollTo()The method can make the interface scroll to the specified coordinate position of the given element.
scrollTo(0,0) returns the scroll position to 0 coordinates