2022/7/4
::-webkit-scrollbar
非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！
::-webkit-scrollbar CSS 伪类元素会影响设置了 overflow:scroll; 的元素的滚动条样式。
备注： 如果没有设置 overflow:scroll;，元素的滚动条将不会显示。
备注： ::-webkit-scrollbar 仅在基于 Blink 或 WebKit 的浏览器（例如，Chrome、Edge、Opera、Safari、iOS 上所有的浏览器，以及其它基于 WebKit 的浏览器）上可用。滚动条样式的标准方法可用于 scrollbar-color 和 scrollbar-width。
CSS 滚动条选择器
你可以使用以下伪元素选择器去修改基于 webkit 的浏览器的滚动条样式：
::-webkit-scrollbar——整个滚动条。
::-webkit-scrollbar-button——滚动条上的按钮（上下箭头）。
::-webkit-scrollbar-thumb——滚动条上的滚动滑块。
::-webkit-scrollbar-track——滚动条轨道。
::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。
::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。
::-webkit-resizer——出现在某些元素底角的可拖动调整大小的滑块。
示例：
scrollView.wxml
<!--pages/scrollView/scrollView.wxml-->
<view style="display: flex; width:100vw; height:100vh; justify-content: center; flex-wrap: wrap;">
<text>scroll-view隐藏滚动条</text>
<view style="display: flex; width: 90%; height: 400px;">
<!-- 滚动容器的父容器 -->
<scroll-view class="scrollView" scroll-y="true">
<!-- 滚动容器 -->
<view style="width:100%; height: 200px; background-color: rgb(238, 225, 209);">内容 1</view>
<view style="width:100%; height: 200px; background-color: rgb(104, 238, 104);">内容 2</view>
<view style="width:100%; height: 200px; background-color: rgb(238, 171, 84);">内容 3</view>
<view style="width:100%; height: 200px; background-color: rgb(113, 115, 240);">内容 4</view>
</scroll-view>
</view>
</view>
scrollView.wxss
/* pages/scrollView/scrollView.wxss */
.scrollView ::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
效果图
微信图片_20220705001819.png
