如何在视口宽度单位中考虑滚动条？

Question

我正在尝试开发类似于Netflix的轮播，但我无法使其具有响应能力。 我一直在使用Codepen示例：

链接到示例

在此示例中，它具有硬编码的宽度和高度。 我想使它使用响应性度量（百分比）。 我想使用vw视口宽度单位，但这对我不起作用，因为它不排除滚动条。 因此，当我希望每个轮播项目的宽度都为20vw（以便每个轮播项目的宽度为视口大小的20％）时，它们总是比我想要的宽，因为视口不排除滚动条。

我该如何解决这个问题？

Answer 1

我举了一个例子： 链接

在此示例中，我想显示五个项目并在右侧显示一个箭头。 第6项应隐藏在箭头后面，但箭头宽度不正确。

每个项目的宽度为18.4vw（（100-8）/5=18.4）。 如您所见，我在左侧和右侧分别填充了4vw（因此，我将总宽度减去8），因此，我将箭头图层设置为：

position:absolute;
right:0;
width:4vw;

这样，箭头始终固定在右侧。

问题是18.4vw是相对于视口的度量，并且由于有滚动条，因此宽度不正确，因为滚动条的宽度破坏了正确的度量。

我不知道你是否了解我想做的。

BR。