el-backtop关于 target is not existed: .page-component__scroll .el-scrollbar__wrap的问题

element的官网提供了两种
在这里插入图片描述
但是我们复制到项目中会发现控制台报
target is not existed: .page-component__scroll .el-scrollbar__wrap的问题
这里以第二种为例:

<el-backtop :bottom="10" :right="0">
  <div
      style="{
      height: 100%;
      width: 100%;
      border-radius: 50%;
      font-size: 13px;
      background-color: #f2f5f6;
      box-shadow: 0 0 6px rgba(0,0,0, .12);
      text-align: center;
      line-height: 20px;
      color: #1989fa;
      padding: 8px;
    }"
    >
      返回顶部
    </div>
 </el-backtop>

其实解决方法很简单
把target=".page-component__scroll .el-scrollbar__wrap"这一部分直接删除,
但是这里需要把el-backtop放到最外层的那个div上;或者就是给外层的div加高度,有几个加几个 每个相关的div都需要加高度;

在这里插入图片描述
完美解决 且无报错,
哈哈哈,遇到问题不要慌,多试一试就好了!

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-scrollbarel-backtop是Element Plus库中的两个组件,用于实现滚动条和回到顶部功能。 el-scrollbar是一个自定义滚动条组件,用于在需要滚动的容器中显示自定义的滚动条。它可以通过设置不同的属性来控制滚动条的样式和行为。 el-backtop是一个回到顶部的组件,当页面滚动时,它会显示在页面的某个位置,并在点击时将页面滚动到顶部。 在使用el-backtop组件时,需要注意设置target属性。这个属性指定了要监听滚动的元素。如果页面中有多个滚动元素,需要将target属性设置为正确的元素选择器,以确保el-backtop能够正确监听滚动事件。 下面是一个使用el-scrollbarel-backtop的示例: ```html <template> <div class="container"> <el-scrollbar wrap-class="scroll-wrap"> <!-- 这里是需要滚动的内容 --> <!-- ... --> </el-scrollbar> <el-backtop target=".scroll-wrap"></el-backtop> </div> </template> <script> export default { // ... } </script> <style> .container { height: 400px; /* 设置容器的高度,使其出现滚动条 */ position: relative; } .scroll-wrap { height: 100%; /* 设置滚动内容的高度,使其撑开容器 */ } </style> ``` 在上面的示例中,我们将el-scrollbarel-backtop放在一个容器中。容器的高度设置为400px,使其出现滚动条。el-scrollbarwrap-class属性设置为"scroll-wrap",这样我们可以通过选择器".scroll-wrap"来指定el-backtop的target属性。 这样,当页面滚动时,el-backtop会显示在容器的右下角,并在点击时将页面滚动到顶部。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值