带有“滚动条装订线：稳定两边”的全屏视频/图像

Question

我为我的网站设置了“scrollbar-gutter：stable Both-edges”以实现对称外观（“scrollbar-gutter：stable”似乎对我来说产生了轻微倾斜的外观），但现在我需要显示一个覆盖 的视频整个屏幕宽度，包括由“双边缘”创建的左侧空间 - 右侧的滚动条本身很好（这将是一种登陆页面，但其下方有内容）。最好的方法是什么？

我想过只使用“scrollbar-gutter: stable”，然后手动为每个元素添加左侧的滚动条宽度，但似乎获取滚动条实际宽度的唯一方法是使用 JavaScript (

如何获取浏览器滚动条宽度？）。在我看来，这可能不是最佳实践——调整整个页面的一个非常基本的属性，用 JS 移动所有内容。但这只是一种感觉，没有任何理性基础，而且我对网络开发非常陌生，所以可能是完全错误的。如果有任何建议，我将不胜感激。

Answer 1

我不知道我是否理解这个问题，但这突然出现在我的脑海中。计算滚动条宽度的脚本。对您有进一步帮助吗？滚动条宽度在主体或包含滚动区域的元素上设置。

(() => {
  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', 
        ''
      );
  });
})();