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

这是一个简化的问题

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

据我所知，处理这个问题的唯一方法是使用Javascript计算滚动条的宽度（David Walsh的优秀作品），并将其设置为

left/right:-scrollbarwidthpx

标题的值

然而，考虑到我正在处理的页面的动态特性，随着标题在DOM中的位置和位置的变化，这取决于用户滚动到的位置，我希望只有在我无能为力的情况下，才使用这个选项

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

谢谢

html，正文{
宽度：100%；
身高：100%；
溢出：隐藏；
保证金：0；
}
.卷轴{
溢出：自动；
宽度：100%；
身高：100%；
}
#内容{
宽度：400px；
高度：自动；
保证金：自动；
背景：灰色；
}
.标题{
宽度：400px；
位置：固定；
保证金：0自动；
高度：60px；
背景：黄色；
z指数：10；
}
.内容{
高度：1200px；
背景：线性梯度（红色、橙色）；
宽度：100%；
保证金：自动；
位置：相对位置；
z指数：1；
边框顶部：61px实心；
边框底部：1px实心；
}