如何实现屏幕缩小时部分项可滚动的响应式导航栏？

针对你需要的中间区域横向滚动效果，核心思路是通过Flex布局结合滚动属性实现，具体步骤如下：

核心实现步骤 #

• 固定项防压缩：给左右两个固定导航项添加 flex-shrink: 0，确保屏幕缩小时它们不会被挤压变形，保持原有宽度。
• 滚动容器配置：给中间滚动区域的容器设置以下样式，让它占据剩余空间并在内容超出时触发横向滚动：

  .scroll-container {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
  }
  

• 滚动项强制同行：为容器内的滚动导航项添加 white-space: nowrap，避免自动换行导致滚动失效：

  .scroll-container .scroll-item {
    display: inline-block;
    white-space: nowrap;
    /* 可添加padding、颜色等自定义样式 */
  }
  

• 响应式断点切换：通过媒体查询适配不同屏幕尺寸的布局逻辑：

  /* 大屏幕示例断点768px */
  @media (min-width: 769px) {
    .navbar {
      justify-content: space-between; /* 左右固定项分置两端，中间留空 */
    }
    .scroll-container {
      flex: none; /* 不占据中间空间，与右侧固定项并排 */
      overflow-x: visible; /* 禁用滚动，正常显示所有项 */
    }
  }
  
  /* 小屏幕 */
  @media (max-width: 768px) {
    .navbar {
      justify-content: flex-start; /* 从左到右依次排列 */
    }
    .scroll-container {
      flex: 1; /* 占据中间剩余空间 */
      overflow-x: auto; /* 开启横向滚动 */
    }
  }
  

可选优化：自定义滚动条样式 #

如果默认滚动条不符合设计风格，可通过伪元素调整：

.scroll-container::-webkit-scrollbar {
  height: 6px;
}
.scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.scroll-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}
.scroll-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

内容的提问来源于stack exchange，提问作者Clerni