使垫子抽屉左侧内容粘性

Question

我有一个带有滚动条的页面，使用垫子抽屉组件

左边有一个菜单。

我希望当用户滚动页面时菜单内容保留在屏幕上

这是 stackblitz 示例。

我尝试将位置更改为粘性但不起作用

垫子抽屉示例

Answer 1

您可以使用

position: fixed

将侧边栏固定在左侧，然后让内容部分滚动并保持侧边栏固定！

样式.scss

html,
body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
}

html,
body {
  height: 100%;
}

组件.scss

.example-container {
  border: 1px solid #555;
  display: block;
  height: 1000%;
  width: 100%;
}

:host {
  display: block;
  height: 100%;
  width: 100%;
}

.fixed-left {
  position: fixed;
  left: 0;
  top: 0;
  botttom: 0;
}

html

<mat-drawer-container class="example-container">
  <mat-drawer mode="side" opened class="fixed-left"
    >Make this sticky</mat-drawer
  >
  <mat-drawer-content><div>Main content</div></mat-drawer-content>
</mat-drawer-container>

堆栈闪电战