我为我的网站设置了“scrollbar-gutter:stable Both-edges”以实现对称外观(“scrollbar-gutter:stable”似乎对我来说产生了轻微倾斜的外观),但现在我需要显示一个覆盖 的视频整个屏幕宽度,包括由“双边缘”创建的左侧空间 - 右侧的滚动条本身很好(这将是一种登陆页面,但其下方有内容)。最好的方法是什么?
我想过只使用“scrollbar-gutter: stable”,然后手动为每个元素添加左侧的滚动条宽度,但似乎获取滚动条实际宽度的唯一方法是使用 JavaScript (如何获取浏览器滚动条宽度?)。在我看来,这可能不是最佳实践——调整整个页面的一个非常基本的属性,用 JS 移动所有内容。但这只是一种感觉,没有任何理性基础,而且我对网络开发非常陌生,所以可能是完全错误的。如果有任何建议,我将不胜感激。
(() => {
let scroller = (document.scrollingElement || document.body);
// Force scrollbars to display
scroller.style.setProperty('overflow', 'scroll');
// Wait for next from so scrollbars appear
requestAnimationFrame(()=>{
// True width of the viewport, minus scrollbars
scroller.style
.setProperty(
'--vw',
scroller.clientWidth
);
// Width of the scrollbar
scroller.style
.setProperty(
'--scrollbar-width',
`${window.innerWidth - scroller.clientWidth}px`
);
// Reset overflow
scroller.style
.setProperty(
'overflow',
''
);
});
})();