css3 触摸滚动条 |js执行css

/* 滚动条样式 */
::-webkit-scrollbar {
width: 8px; /* 滚动条宽度 */
height: 8px; /* 滚动条高度 */
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
background-color: #f5f5f5; /* 背景颜色 */
border-radius: 4px;
}
/* 滚动条thumb */
::-webkit-scrollbar-thumb {
background-color: #000000; /* 滚动条颜色 */
border-radius: 4px;
}
/* 滚动条hover */
::-webkit-scrollbar-thumb:hover {
background-color: #999999;
}

使用上述CSS代码可以设置滚动条的样式，其中包括宽度、高度、轨道的背景颜色和thumb的颜色和hover时的颜色。

同时，如果希望在touchscreen设备上使用触摸滚动条，也可以为它们添加touch-action属性，如下所示：

/* 触摸滚动条 */
body {
touch-action: pan-y; /* 只允许上下拖动 */
}

通过touch-action属性，这段代码将在移动设备上允许用户只沿垂直方向拖动滚动条。

使用CSS3的触摸滚动条，设计师可以控制网站上出现的滚动条的外观，并在触摸设备上提供可靠的使用体验。