javascript - 独立于侧边栏滚动主页内容

Question

我们网站的母版页在左侧有一个带有一些菜单选项的窄栏，页面内容占据了右侧的其余空间。

我正在尝试确定允许页面内容独立于左列滚动的最佳方式。

我知道我可以为主要内容创建一个可滚动的 div，但我必须保持高度与浏览器窗口高度完全相同，以防止浏览器的主滚动条出现。如果我用 JavaScript 调整它的大小，我相信在调整窗口大小时会有延迟，这看起来有点俗气。

谁能有更好的方法来构建页面以在主页滚动时保持左列静止？（注意：如果左栏太高，可能还需要滚动。）

上图显示了所需的布局。我希望主要内容独立于侧边栏或标题滚动。但是，如果我只是让它成为一个可滚动的<div>，我可以让两个滚动条彼此相邻（一个用于可滚动<div>，另一个用于主浏览器窗口）。

score 6 · Accepted Answer

您可以定位左列fixed，使其固定在窗口上，而页面的其余部分滚动。例如，

.left-column {
  position: fixed;
}

通过从底部定位它也可以让它自己独立滚动：

.left-column {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow: scroll;
}

1 回答 1