[BUG record] The Backtop component of Element Plus does not take effect

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 targeta 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-classto 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>

Guess you like

Origin blog.csdn.net/ymzhaobth/article/details/131210279