javascript - 如何将滚动条与视口(viewport)宽度单位考虑在内？

Question

我正在尝试开发一个类似于 Netflix 的轮播，但我无法使其响应。我一直在使用 codepen 示例:

Link to example

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

如何解决这个问题？

Answer 1

我举了一个例子:Link

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

每个元素的宽度为 18.4vw ( (100-8)/5=18.4)。正如你所看到的，我在左侧和右侧添加了 4vw 的填充(因此，我为总宽度减去 8)，因此，我使用以下内容制作了箭头层:

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

通过这种方式，箭头始终固定在右侧。

问题是 18.4vw 是尊重视口(viewport)的度量，并且由于有滚动条，宽度不正确，因为滚动条宽度破坏了正确的度量。

不知道你是否明白我想做什么。

BR。