如何重置滚动条
时间: 2023-07-07 07:15:10 浏览: 55
要重置滚动条,可以使用以下 CSS 样式:
```
body {
overflow: auto;
}
```
这将为页面添加一个滚动条,并且在每次重新加载页面时都会将滚动条重置回顶部。如果您想要自定义滚动条的样式和行为,您可以使用一些 JavaScript 库,例如 PerfectScrollbar 或 SimpleBar。
相关问题
vue中设置overflowLauto,不能重置滚动条
可以使用以下代码重置滚动条:
```
this.$nextTick(() => {
this.$refs.scrollContainer.scrollTop = 0;
});
```
其中,`scrollContainer`是包含滚动条的元素的引用,`scrollTop`是滚动条的位置。在`$nextTick`中执行代码可以确保DOM已经更新完毕。
vue3中设置overflowLauto,不能重置滚动条
可以使用CSS属性scrollbar-width: none;来隐藏滚动条,然后再使用::-webkit-scrollbar伪元素来自定义滚动条的样式。具体实现可以参考以下代码:
/* 隐藏滚动条 */
body {
scrollbar-width: none;
}
/* 自定义滚动条样式 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 4px;
}
::-webkit-scrollbar-track {
background-color: #f5f5f5;
border-radius: 4px;
}
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)