前端项目，一个有滚动条的容器，自动滚动（类似轮播表），并在滚动到底部后回到原点

RumbleWx

已于 2023-11-14 11:32:31 修改

阅读量310

点赞数

文章标签：前端 javascript 开发语言

于 2023-07-27 16:42:59 首次发布

本文链接：https://blog.csdn.net/rumblewx/article/details/131963377

版权

<!-- 需要给宽高和对应样式 -->
<div class="container">
    <!-- 容器内容 -->
</div>

.container {
    width: 宽度;
    height: 高度;
    overflow: scroll; // 内容溢出时滚动条出现
}

// 获取滚动容器的元素
let container = document.querySelector(".container");
// 设置滚动条到底部
container.scrollTop = container.scrollHeight;
// 定时更新滚动条位置
let scrollInterval = setInterval(function () {
    // 判断滚动条是否在底部
    if (container.scrollTop + container.clientHeight === container.scrollHeight) {
        // 到达底部时，重新滚动到顶部
        container.scrollTop = 0;
    } else {
        // 否则，每隔一段时间滚动一定距离
        container.scrollTop += 1; // 可根据需要调整滚动的距离
    }
}, 100); // 可根据需要调整滚动的间隔时间

原生滚动条相关样式 =》前端原生滚动条修改样式_RumbleWx的博客-CSDN博客