Question

我的页面左右两侧都有一个面板。右侧表示项目列表，并且该列表可能大于页面高度。如果发生这种情况，我不想滚动整个页面，只想滚动此列表容器。我以为overflow-y: scroll;可以解决问题，所以我创建了这个

$(document).ready(() => {
  for (let i = 0; i < 100; i++) {
    const newDiv = (`<div>Log Item</div>`);
    $("#logsContainer").append(newDiv);
  }
});

#page {
  display: grid;
  grid-template-columns: 50% 50%;
}

#logsContainer {
  overflow-y: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="page">
  <div>
    Commands
  </div>

  <div>
    <div>
      Logs
    </div>
    <div id="logsContainer">
    </div>
  </div>
</div>

不幸的是，它仍然为整个页面创建了一个滚动条，我无法在div中滚动。仅当列表中的项目太多而无法显示时，才如何为该列表创建滚动条？

Answer 1

尝试以下代码，以固定高度并显示滚动条：

.logsContainer {
    height: 200px;
    overflow-y: scroll;
    overflow-x:hidden;
}

Answer 2

.logsContainer {overflow:auto;height:200px;}

通常，混合使用overflow-x和overflow-y不是一个好主意。浏览器将不接受拆分设置。

如果必须剪掉另一个滚动条，请使用外部容器并溢出：隐藏。

将滚动条添加到div而不是滚动整个页面

2 个答案: