如何使用視口寬度單位考慮滾動條？

我正在嘗試開發類似於Netflix的傳送帶，但我無法使其響應。我一直在使用一個codepen例如：如何使用視口寬度單位考慮滾動條？

在本例中，它具有一個硬編碼的寬度和高度。我想讓它使用一個響應措施（百分比）。我想使用視口寬度單位vw，但這對我不起作用，因爲它不排除滾動條。所以，當我想讓每個旋轉木馬項目的寬度爲20vw（以使每個輪播項目爲視口大小的20％）時，它們總是比我想要的寬，因爲視口不會排除滾動條。

我該如何解決這個問題？

來源

2016-01-16 Agustin Herrera

該鏈接不起作用。響應式幻燈片和caroussels並不難，但我們需要看看代碼。 –

歡迎來到Stack Overflow！我編輯了你的問題的標題，以更好地反映你試圖獲得幫助的內容。我還改進了您的問題的語法，並將URL固定到您的代碼示例。（確保指向支持資源的鏈接是正確的，或者人們可能不會花時間回答您的問題非常重要！）我還刪除了netflix標記，因爲此問題本身並不涉及Netflix。祝你找到答案！ – jbafford

鏈接是http://codepen.io/joshhunt/pen/LVQZRa我知道這並不難。複雜的是Netflix如何做到這一點。因爲當你在系統上懸停時，寬度會增加 –

我已經做出了表率：Link

在這個例子中，我想展示五個項目，並顯示在右邊的箭頭。第六項應該隱藏在箭頭後面，但箭頭寬度不正確。

每個項目的寬度是18.4vw（（100-8）/5=18.4）。正如你所看到的，我已經把墊在左邊和右邊與4VW（所以，我減去8總寬度），因此，我已用箭頭層：

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

在這種方式中，箭頭始終固定在右側。

問題是18.4vw是關於視口的度量，並且由於存在滾動條，寬度不正確，因爲滾動條寬度違反了正確的度量。

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

BR。

來源

2016-01-17 18:31:23

如何使用視口寬度單位考慮滾動條？

回答

相關問題