javascript - 与固定元素和可滚动内容对齐

Question

Here是问题的简化 JSFiddle。

如您所见，由于滚动条，内容与标题不对齐。

据我所知，处理这个问题的唯一方法是使用 Javascript 计算滚动条的宽度(David Walsh 的出色 method 突然想到)并将其设置为 left/right:-标题的 scrollbarwidthpx 值。

但是，考虑到我正在处理的页面的动态特性，标题在 DOM 中的位置和位置会根据用户滚动到的位置而变化，这是我希望只转向的一个选项如果我无能为力的话。

我的问题是，有没有什么方法可以在保留滚动溢出的同时将滚动条或内容从流中移除，或者仅使用 HTML/CSS 对齐两个元素？滚动条宽度在所有影响流程的浏览器/操作系统中是否一致？还是我必须求助于使用 Javascript 来对齐它们？

谢谢!

Answer 1

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

.scroll {
    overflow: auto;
    width: 100%;
    height: 100%;
}
#content{
    width: 400px;
    height:auto;
    margin: auto;
    background:gray;
}
.header {
    width: 400px;
    position: fixed;
    margin: 0 auto;
    height: 60px;
    background: yellow;
    z-index: 10;
}

.content {
    height: 1200px;
    background: linear-gradient(red, orange);
    width: 100%;
    margin: auto;
    position: relative;
    z-index: 1;
    border-top:61px solid;
    border-bottom:1px solid;
}

<div class="scroll">
    <div id="content">
      <div class="header"></div>
      <div class="content"></div>
    </div>
</div>