CSS横向滚动并且隐藏滚动条

最新推荐文章于 2025-03-18 11:13:08 发布

素发随风扬

最新推荐文章于 2025-03-18 11:13:08 发布

阅读量642

点赞数

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/a1009698473/article/details/134374434

版权

博客围绕页面导航栏横向滚动问题展开。在添加overflow - x: auto后出现滚动条，需将其隐藏。解决方案提及用 -webkit-overflow-scrolling属性控制移动设备滚动回弹效果，用::-webkit-scrollbar伪类选择器改变滚动条样式。

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

项目场景：

提示：这里简述项目相关背景：

例如：最近在做页面的导航栏横向滚动，添加了overflow-x: auto后出现滚动条，故需要隐藏滚动条

解决方案：

-webkit-overflow-scrolling属性控制元素在移动设备上是否使用滚动回弹效果。
::-webkit-scrollbar伪类选择器影响了一个元素的滚动条的样式.

.list_5 {
  /* 滑动 */
  overflow-x: auto;
  width: 389px;
  height: 70px;
  margin: 16px -29px 0 15px;
  /* -webkit-overflow-scrolling属性控制元素在移动设备上是否使用滚动回弹效果。 */
  -webkit-overflow-scrolling: touch;
}
/* ::-webkit-scrollbar伪类选择器影响了一个元素的滚动条的样式. */
.list_5::-webkit-scrollbar{
  display: none;
}