css - 如何使粘性元素可滚动？

Question

我有一个垂直的粘性导航栏，但是当屏幕太小时我希望它可以滚动。现在我只能在滚动到页面底部然后滚动时才能看到导航栏中的底部类别。

在第二张照片上，我希望用鼠标将鼠标悬停在它上面时可以滚动。我试过了：

• 为其设置高度，但类别发生变化，因此高度发生变化。
• 设置高度以适应内容
• 将最大高度设置为最大内容

标签： css

Answer 1

如果没有特定的代码示例，我只会给您一个模仿导航栏的“随机代码示例”。您必须自己实现代码。

1. max-height: 100vh;在导航栏中添加一个。这会将导航栏的高度限制为浏览器窗口的高度。

2. overflow-y: auto;在导航栏上使用允许垂直溢出和滚动条。结合最大高度，它允许导航栏本身溢出，而不是调整高度。

nav {
  max-height: 100vh;
  overflow-y: auto;
}





/* for styling purpose only */

body {
  margin: 0;
}

nav {
  width: 150px;
}

nav a {
  display: block;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  background-color: blue;
  color: white;
  text-decoration: none;
  padding: 1em;
  border: 1px solid darkblue;
}

<nav>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  <a href="#">Link 6</a>
  <a href="#">Link 7</a>
  <a href="#">Link 8</a>
  <a href="#">Link 9</a>
</nav>