如何实现spectrum.chat二级频道区域的滚动条隐藏？

你已经摸到关键门道了！这种「容器可正常滚动，但滚动条完全隐藏」的效果，核心是通过定制滚动条样式实现的，同时要保证容器本身的滚动功能不受影响。

核心实现逻辑 #

这类效果的关键在于针对不同浏览器的滚动条样式进行定制：

• 对于Chrome、Safari等WebKit内核浏览器，使用::-webkit-scrollbar伪元素将滚动条的宽高设为0，并设置透明背景——这样滚动条会彻底隐藏，但容器的滚动逻辑完全保留。
• 为了覆盖更多浏览器，可以补充Firefox和IE/旧版Edge的兼容规则。

针对你的代码修改 #

在你的CSS中，给需要隐藏滚动条的容器（也就是.navigation和.secondary）添加以下样式规则：

/* 隐藏WebKit浏览器的滚动条 */
.navigation::-webkit-scrollbar,
.secondary::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent;
}

/* 兼容Firefox */
.navigation,
.secondary {
  scrollbar-width: none;
}

/* 兼容IE和旧版Edge */
.navigation,
.secondary {
  -ms-overflow-style: none;
}

把这段代码添加到你的<style>标签中，就能实现和Apollo频道左侧完全一致的效果：容器可以正常滚动，但滚动条彻底不可见。

为什么之前的代码没生效？ #

你之前的代码已经正确配置了overflow: hidden auto（让内容超出时触发滚动）、sticky定位和网格布局，但缺少了滚动条的定制规则——浏览器默认会显示滚动条，所以必须通过伪元素或专用属性来隐藏它。

完整修改后的代码示例 #

这里是整合后的完整代码，你可以直接替换原来的内容：

<html>
<head>
<style>
html {
  display: flex;
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.5;
  background-color: rgb(250, 250, 250);
  color: rgb(22, 23, 26);
  -webkit-font-smoothing: auto;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  padding: 0px;
  margin: 0px;
}

body {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overscroll-behavior-y: none;
}

#root {
  height: 100%;
  width: 100%;
}

@media (min-width: 1648px) {
  .wrapper {
    grid-template-columns: 256px 1fr;
    grid-template-areas: "navigation main";
  }
}

.wrapper {
  display: grid;
  width: 100%;
  grid-template-columns: 72px 1fr;
  grid-template-areas: "navigation main";
}

@media (min-width: 1648px) {
  .navigation {
    width: 256px;
  }
}

.navigation {
  background-color: yellow;
  position: sticky;
  top: 0px;
  width: 72px;
  height: 100vh;
  grid-area: navigation / navigation / navigation / navigation;
  overflow: hidden auto;
  /* Firefox兼容 */
  scrollbar-width: none;
  /* IE/旧Edge兼容 */
  -ms-overflow-style: none;
}

.main {
  display: grid;
  justify-self: center;
  grid-template-columns: minmax(320px, 400px) minmax(600px, 968px);
  grid-template-rows: 100%;
  grid-template-areas: "secondary primary";
  max-width: 1392px;
  gap: 24px;
  margin: 0px 24px;
}

.secondary {
  background-color: green;
  height: 100vh;
  position: sticky;
  top: 0px;
  padding-bottom: 48px;
  overflow: hidden auto;
  grid-area: secondary / secondary / secondary / secondary;
  /* Firefox兼容 */
  scrollbar-width: none;
  /* IE/旧Edge兼容 */
  -ms-overflow-style: none;
}

.primary {
  background-color: blue;
  height: 100%;
  max-width: 968px;
  display: grid;
  grid-template-rows: 1fr;
  border-left: 1px solid rgb(235, 236, 237);
  border-right: 1px solid rgb(235, 236, 237);
  border-bottom: 1px solid rgb(235, 236, 237);
  border-radius: 0px 0px 4px 4px;
  grid-area: primary / primary / primary / primary;
}

.content {
  height: 3502px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgb(255, 255, 255);
}

.card {
  margin-top: 24px;
  background: rgb(255, 255, 255);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(235, 236, 237);
  border-image: initial;
  border-radius: 4px;
}

.cardHeader {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  position: sticky;
  top: 0px;
  z-index: 11;
  border-bottom: 1px solid rgb(235, 236, 237);
  padding: 16px;
  background: rgb(255, 255, 255);
  border-radius: 4px 4px 0px 0px;
}

.cardHeaderLabel {
  font-size: 16px;
  font-weight: 700;
  color: rgb(36, 41, 46);
  display: flex;
  padding-right: 16px;
  flex: 1 0 auto;
}

.cardContent {
  height: 1950px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  border-radius: 0px 0px 4px 4px;
  overflow: hidden;
}

/* WebKit滚动条隐藏 */
.navigation::-webkit-scrollbar,
.secondary::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent;
}
</style>
<script></script>
</head>
<body>
<div id="root">
  <div class="wrapper">
    <div class="navigation"></div>
    <div>
      <section class="main">
        <section class="secondary">
          <section class="card">
            <div class="cardHeader">
              <div class="cardHeaderLabel">Teams</div>
            </div>
            <div class="cardContent">
              <span>START</span>
              <span>END</span>
            </div>
          </section>
        </section>
        <section class="primary">
          <section class="content">
            <span>START</span>
            <span>END</span>
          </section>
        </section>
      </section>
    </div>
  </div>
</div>
</body>
</html>

修改后，你的.navigation和.secondary容器就能实现「可滚动但无滚动条」的效果，和你看到的Apollo页面完全一致。

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