Question

我有一个侧边栏，其中有一个食谱列表，但该列表足够长，用户需要向下滚动。现在，我想要实现的是仅将垂直滚动添加到该侧边栏而不是整个页面。因此，当用户向下滚动时，只有侧边栏滚动，而不滚动整个页面。

我试图禁用整个页面的溢出y（隐藏），只添加了溢出y滚动到该侧边栏，但是当我增加列表时，它不起作用。如果我从HTML和body标签中删除了“ overflow-y（隐藏）”，然后重试，我会看到整个页面的滚动条。

.recipe-list {
        list-style-type: none;
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin: 1rem 0;
        overflow-y: scroll;
    }

注意：我正在使用CSS GRID。

这是我的结果

正常： Normal

列表增加

Adding Content

Answer 1

正如Kamalesh M. Talaviya所述，您应该使用最大高度。还要确保您正在使用overflow-y：auto。仅在需要时才显示滚动条。（因此，如果不需要，您将不会看到丑陋的滚动条。）

Answer 2

要使溢出正常工作，您需要调整高度以扩展到最大容器高度。我假设一开始您要具有100％的父级高度，然后如果添加了更多元素，则应该可以使用滚动。

.container {
  background: green; 
  height: 300px;
  width: 100%;
  display: inline-block;
}

.left, .right {
  display: inline-block;
  height: 100%;
}
.left {
  width: 40%;
  background: lightgreen;
}

.list-wrapper {
  max-height: 100%;
  overflow: auto;
}

<div class="container">
  <div class="left list-wrapper">
    <ul>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
      <li class="some element">Something</li>
    <ul>
  </div>
  <div class="right">
  <div>
</div>

Answer 3

只需给您的食谱列表一个高度和一个可滚动的溢出-y：

ul {
  background: #eee;
  height: 300px;
  overflow-y: scroll;
  width: 200px;
}

li {
  background: #ccc;
  line-height: 50px;
  margin: 20px 0;
  width: 100%;
}

<body>
  <ul>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
  </ul>
</body>

希望这对您有用！

如何仅将溢流y添加到特定div

3 个答案: