Project scenario:
[email protected]
& [email protected]
Problem Description
Vue project, the page is wrapped with the Scrollbar component of Element Plus. Introducing the Backtop component into the page does not take effect as the page scrolls
Cause Analysis:
The analysis is that the scrolling of the Scrollbar component does not trigger the Backtop component, that is, the Backtop component does not correctly listen to the object that triggers the scrolling
solution:
The Backtop component provides target
a property to specify the object that triggers the scrolling.
The class of the Scrollbar component wrapping container of Element Plus is el-scrollbar__wrap
, in order to avoid the official change of the class name or confusion with other Scrollbar components, you can use the properties provided by this component wrap-class
to customize a class name
<section class="app-main">
<el-scrollbar wrap-class="app-main-scroll-wrap">
<div class="container">
<!-- page content -->
<!-- ... -->
<!-- <el-backtop target=".app-main .el-scrollbar__wrap" /> -->
<el-backtop target=".app-main-scroll-wrap" />
</div>
</el-scrollbar>
</section>