Clarity Design侧边栏内容超出视口时无法滚动问题求助

嘿，我之前在Angular 5里用Clarity的sidenav时也碰到过一模一样的问题！导航链接超出视口就滚不动，只能缩页面，太闹心了。给你几个亲测有效的解决办法：

1. 对齐Clarity官方的sidenav结构 #

Clarity的组件对结构有要求，没按规范来的话，样式和交互很容易出问题。你可以调整外层容器和内部结构：

首先给整个sidenav加个容器，别直接用<nav>当最外层：

<div class="clr-sidenav-container">
  <!-- 你的sidenav，要加上clr-sidenav类 -->
  <nav class="sidenav clr-sidenav" [clrOpen]="true">
    <students></students>
  </nav>
  <!-- 这个主内容区域不能丢！sidenav的高度计算依赖它 -->
  <div class="clr-main-content">
    <!-- 这里放你的页面主内容 -->
  </div>
</div>

然后修改students组件里的内容容器类，换成Clarity官方的clr-sidenav-content：

<section class="clr-sidenav-content">
  <section class="nav-group">
    <label>Alumnos</label>
    <ul class="nav-list">
      <li *ngFor="let student of students">
        <a href="#" class="nav-link">{{student.name}}</a>
      </li>
    </ul>
  </section>
</section>

2. 手动给内容区加滚动样式 #

如果调整结构后还是不行，那直接给内容区域加滚动约束就行。在你的组件CSS里加这段：

.clr-sidenav-container {
  height: 100vh; /* 让容器占满整个视口高度 */
  display: flex;
}

.clr-sidenav {
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
}

.clr-sidenav-content {
  height: 100%;
  overflow-y: auto; /* 垂直方向超出时自动显示滚动条 */
  padding: 1rem; /* 可选，给内容加一点内边距，看着更舒服 */
}

3. 检查版本兼容性 #

你用的是Angular 5，得确保Clarity版本和它兼容。Clarity 0.13.x到0.14.x是支持Angular 5的，要是你装了更高版本的Clarity，肯定会出问题。去package.json里确认下：

"@clr/angular": "^0.14.0",
"@clr/ui": "^0.14.0"

4. 排查样式冲突 #

要是上面的方法都没用，打开浏览器开发者工具，看看sidenav和内容区的高度是不是被其他样式覆盖了。比如有没有父元素设置了overflow: hidden，或者高度被设成了固定值导致内容没法滚动。

调整完之后刷新页面，试试滚轮或者拖动滚动条，应该就能看到被隐藏的导航链接了！

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