html 滚动条相关开发经验总结

一、自定义滚动条样式

1.1 隐藏滚动条

::-webkit-scrollbar {display: none;
}

全局隐藏滚动条

* {scrollbar-width: none;
}

1.2 自定义滚动条样式

.box {&::-webkit-scrollbar {display: inline-block;width: 4px;height: 10px;}&::-webkit-scrollbar-thumb {background-color: #ccc;border-radius: 8px;}&::-webkit-scrollbar-track {width: 6px;background: transparent;}
}

1.3 局部展示滚动条

假设项目中全局使用了1.1 中的方式隐藏了滚动条，并且设置了  scrollbar-width: none;

如果要想对单独的 box 元素展示滚动条，需要增加 scrollbar-width: unset 重置滚动条的宽度，且scrollbar-width 的值只能是 unset / inherit / auto，不能是 thin；

.box {scrollbar-width: unset; // 重要&::-webkit-scrollbar {display: inline-block;width: 4px;height: 10px;}&::-webkit-scrollbar-thumb {background-color: #ccc;border-radius: 8px;}&::-webkit-scrollbar-track {width: 6px;background: transparent;}
}

二、横向滚动和纵向滚动

鼠标滚动只支持纵向滚动，横向滚动需要按住 shift 键，或者使用触控板，或者鼠标拖动横向滚动条来实现。

2.1 实现横向滚动

所以在一个隐藏了滚动条的项目中，如果一个元素仅能横向滚动，且需要使用鼠标能够滚动，需要我们手动实现这个功能。具体可以参考下面这篇文章。

https://blog.csdn.net/qq_17335549/article/details/145785063https://blog.csdn.net/qq_17335549/article/details/145785063