el-scrollbar内容自动铺满

1.html代码

<div class="container">
    <el-scrollbar class="dashboard-container"> </el-scrollbar>
  </div>

2.css样式

//这里记得加scoped

<style scoped>

//用来隐藏横向滚动条

::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
.container {
  background-color: #eeeeee;
  padding: 16px;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
}
.dashboard-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background-color: #fff;
}
</style>

3.效果图

el-scrollbarelement-ui 中的一个组件,可以用于实现在一个容器内部的无限滚动效果。实现自动滚动可以通过设置 el-scrollbar 的属性和使用 JavaScript 的 DOM 操作来完成。 首先在需要实现滚动效果的容器上添加 el-scrollbar,例如: ```html <el-scrollbar style="height: 300px;"> <ul> <li>...</li> <li>...</li> <li>...</li> ... </ul> </el-scrollbar> ``` 其中 ul 列表是需要滚动的内容。接下来,可以使用 CSS 的 overflow 属性来隐藏容器内多余的内容,只显示 el-scrollbar 内部的内容: ```css ul { overflow: hidden; padding: 0; margin: 0; list-style: none; } ``` 为了实现自动滚动,可以使用 JavaScript 来控制内容滚动的位置,以及设置一个定时器来定期滚动内容。 ```js // 获取 el-scrollbar 中的 ul 列表 const ul = document.querySelector('.el-scrollbar ul'); // 每秒滚动50个像素 const scrollSpeed = 50; function scrollStep() { ul.scrollTop += scrollSpeed; // 如果已经滚动到底部,回到顶部 if (ul.scrollTop + ul.offsetHeight >= ul.scrollHeight) { ul.scrollTop = 0; } } // 每隔一定的时间调用一次 scrollStep setInterval(scrollStep, 1000 / 60); ``` 上述代码中通过获取 el-scrollbar 中的 ul 列表,然后每次将 scrollTop 属性递增 scrollSpeed 的值来实现自动滚动。如果滚动到了内容的底部,则将 scrollTop 重置为0,实现循环滚动的效果。 综上所述,通过使用 el-scrollbar 组件以及 CSS 和 JavaScript 的操作,可以实现容器内部自动滚动的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值