手机端页面滚动，强制显示滚动条

最新推荐文章于 2024-04-21 09:10:41 发布

疯糖

最新推荐文章于 2024-04-21 09:10:41 发布

阅读量2k

点赞数 1

分类专栏： css 文章标签： css3 html5 前端

本文链接：https://blog.youkuaiyun.com/Cynthia_Yue27/article/details/120880475

版权

css 专栏收录该内容

2 篇文章

订阅专栏

在网页设计中，为一个固定高度的ul元素设置滚动，并通过重写CSS样式来强制显示滚动条。通过`::-webkit-scrollbar`选择器，调整了滚动条的宽度、颜色和边框，确保在滚动区域有限的情况下，用户能注意到并使用滚动条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做一个需求，一个固定高度的ul，里边多个li，li高度超出了ul，ul也设置了滚动，也可以正常滚动，但是并没有出现滚动条
因为滚动区域较小，为了引起用户的注意，需强制显示滚动条
所以通过重写滚动条样式，强制展示滚动条

&::-webkit-scrollbar {
  -webkit-appearance: none;
}
&::-webkit-scrollbar:vertical { // 纵向滚动条
  width: .06rem;
}
&::-webkit-scrollbar:horizontal { // 横向滚动条
  width: .06rem;
}
&::-webkit-scrollbar-thumb { // 滚动块
  background-color: #bbb;
  border-radius: 10px;
}
&::-webkit-scrollbar-track { // 滚动条的轨道
  border-radius: 10px;
}
&::-webkit-scrollbar {
  display: block;
  width: .02rem;
}