两种方式:
- 使用 padding
- 使用 ::webkit-scrollbar
第一种,使用padding
- 先把 body 的滚动条隐藏,隐藏横向滚动条;
- 把 main 元素的 overflow-y 设置为 scroll,让它可以垂直滚动;
- 把 main 元素的右侧间距 padding-right 设置为滚动条的宽度。根据操作系统会有不同,windows 数值大些;
第二种,使用 ::webkit-scrollbar
.demo::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.demo {
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
overflow-x: hidden;
overflow-y: auto;
}