如何在視口寬度單位中考慮滾動條？

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。