CSS隐藏某个模块的滚动条效果，实现横向滑动无滚动条

实现横向滚动效果但是不出现滚动条

如代码设置了一个模块的导航，以下是完整html和css代码

   

        

            
每日推荐
            
新品速递
            
精彩测评
            
资讯
            
全新
        
    

.nav {
  width: 94.6667vw;
  overflow-x: auto;
  margin: 0 auto;
}

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

.nav ul {
  height: 13.0667vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: max-content;
  flex-wrap: nowrap;
}

.nav ul li {
  margin-right: 10vw;
}

.nav ul li:last-child {
  margin-right: 0;
}

.nav ul a {
  color: #999999;
}

.nav ul .one {
  position: relative;
}

.nav ul .one a {
  color: #333333;
}

.nav ul .one .oneimg {
  position: absolute;
  top: 6vw;
  left: 6vw;
  width: 4vw;
  height: 0.8vw;
}

具体过程

首先我们给最外层盒子设置一个宽度用于版心居中，然后通过 overflow-x: auto; 实现横向滚动效果，接着我们给ul列表设置样式

.nav ul {
  height: 13.0667vw;
  /* 设置flex布局 */
  display: flex;
  justify-content: space-between;
  /* 实现内容在垂直方向居中 */
  align-items: center;
  /* 实现ul宽度由内容撑开 */
  width: max-content;
  /* 内容不换行显示 */
  flex-wrap: nowrap;
}

此时我们发现每个li的内容紧贴在一起，是因为没有给li单独设置外边距，设置外边距撑开ul达到效果，其他样式可自行设置

.nav ul li {
  margin-right: 10vw;
}

.nav ul li:last-child {
  margin-right: 0;
}

最后给整个大盒子nav设置样式隐藏滚动条

/* 设置浏览器中隐藏滚动条 */
.nav::-webkit-scrollbar {
  display: none;
}

整体效果