[譯] 解決 100vw 下滾動條引起的問題

原文連接：Scrollbars & CSS Custom Properties，by  Louis Hoebregts

Photo by Maria Teneva on Unsplash

摘要

• Widows 系統中的滾動條是會佔據視口空間的。
• vw 單位沒有將滾動條計算在內。
• fixed 彈出框裏的 fixed 按鈕是相對視口定位的而非彈出框。

正文

做爲一個 Windows 系統用戶，我有時會注意到有些網站沒有在 Windows 上測試。致使的問題之一就是，可能在什麼地方會看見一個滾動條沒有理由的出現！在 MacOs 系統中，當你不滾動頁面是，滾動條默認是隱藏的。它們也不佔據任何的視口空間，這就表示 100% 的 body 寬度等於 100% 的屏幕寬度。可是在 Windows 系統中，滾動條的寬度會從窗口的寬度中減掉。不提供的瀏覽器的滾動條寬度有所差別，但一般是 17px 寬。

這裏列出了我最近遇到的兩個狀況：

1. 在使用 vm 單位時

規範 中對 vw 單位的定義以下：

視口百分比長度（viewport-percentage lengths）是相對於初始包含塊（viewport-percentage lengths）的尺寸計算的。[...] 可是，咱們假設滾動條是不存在的。

說的很清楚了，滾動條是不會影響 vw 單位計算的。

下面的截屏中，div 的寬度設置成了 100vw。能夠看見，由於垂直滾動條的存在，有兩個問題。

首先，由於 div 太寬了，把橫向滾動條戳出來了；其次，由於有垂直滾動條出現，在沒有滾動橫向滾動條的默認狀況下，段落文本被滾動條覆蓋裁剪了。

.container {
  width: 100vw;
}
複製代碼

2. 在使用 fixed 彈出框時

我在實現彈出框的時候，一般會爲彈出框指定一個寬度還有 overflow: auto; 樣式。這樣，若是彈出框裏的內容不少，用戶能夠滾動內容。可是用戶也可使用關閉按鈕關閉彈框，但我但願滾動的時候關閉按鈕也是可見的。所以，在彈出框中我將關閉按鈕 position: fixed; 了。

下面是我想實現的效果。在沒有出現滾動條的時候，一切正常。

這是關閉按鈕使用的樣式：

.close {
  position: fixed;
  top: 40px;
  right: 40px;
}
複製代碼

當彈框內容不少時。滾動條出現，此時關閉按鈕的對齊就不是很完美了，由於按鈕的左偏移值是相對視口的。這就顯得左邊比上邊的偏移距離要小了。

解決方法

以後我學習了關於 CSS 自定義屬性（也稱爲 CSS 變量）方面的知識，我想到能夠聲明一個變量用來存儲滾動條寬度。這樣一來，我就能夠繼續使用 vw 定位元素而無需擔憂是在 Mac 仍是在 Windows 上。

首先須要計算出滾動條寬度。我建立了一個小工具函數，利用 JavaScript 建立的一個臨時元素，獲得滾動條寬度並返回。

const getScrollbarWidth = () => {
  // Create a temporary div container and append it into the body
  const container = document.createElement('div');
  // Append the container in the body
  document.body.appendChild(container);
  // Force scrollbar on the container
  container.style.overflow = 'scroll';

  // Add ad fake div inside the container
  const inner = document.createElement('div');
  container.appendChild(inner);

  // Calculate the width based on the container width minus its child width
  const width = container.offsetWidth - inner.offsetWidth;
  // Remove the container from the body
  document.body.removeChild(container);

  return width;
};

// Get the scrollbar dimension
const scrollbarWidth = getScrollbarWidth();
// Set a custom property with the value we calculated
document.documentElement.style.setProperty('--scrollbar', `${scrollbarWidth}px`);
複製代碼

在 CSS 中，我建立一個默認變量，以防 Javascript 未啓用或觸發錯誤。

:root {
  --scrollbar: 0px;
}
複製代碼

如今咱們有了一個包含瀏覽器滾動條寬度的變量，能夠直接在 CSS 中使用它！

.container {
  width: 100vw; /* Fallback for old browsers */
  width: calc(100vw - var(--scrollbar));
}
複製代碼

下面是關閉按鈕的樣式：

.close {
  position: fixed;
  top: 40px;
  right: 40px; /* Fallback for old browsers */
  right: calc(40px + var(--scrollbar));
}
複製代碼

我但願這篇文章能對你的項目有所幫助！別忘了在 Windows 電腦上測試你的網站哦🤭

（正文完）

---

廣告時間（長期有效）

我有一位好朋友開了一間貓舍，在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個愛貓人士而且有須要的話，不妨掃一掃她的【閒魚】二維碼。不買也沒關係，看看也行。

（完）