情境

今天我們來討論一個卡片容器的例子：

當內容在一般裝況下，我們不會需要滾動條，但是當內容長度過多時，我們會需要滾動調，讓我們在不改變卡片容器大小的狀況下，仍然能夠瀏覽所有的內容：

你能看見多遠的未來呢？

當我們想到內容如果過長時，會需要出現滾動條，因此我們的 CSS 可能會這樣寫：

.card {
  overflow-y: scroll;
}

雖然這樣意味著垂直方向會出現滾動條。不過，我們其實並不保證卡片的內容總是會超出卡片的範圍。所以如果在一個內容足夠短的卡片上又出現一個可見的滾動條，這樣會給我們帶來一些視覺上的困擾，因為我們並不希望使用者被這不會用到的滾動條分散注意力，甚至這樣的滾動條可能會壓縮到畫面的寬度：

因此我們會建議將滾動條設置為 auto，讓內容超出範圍時才自動顯現：

.card {
  overflow-y: auto;
}

小結

我們能夠考慮到內容過長的問題而設置 overflow-y: scroll; 是一個很貼心的舉動。但是內容過長並不是一個總是會出現的情境。因此畫面上一旦出現了使用者用不到的功能時，會容易分散使用者的注意力。換句話說，你想像他在看到這個畫面時能專注在卡片的內容，但是這時他卻正在想著旁邊這個滾動條的作用是什麼，而嘗試去做一些操作來試試看。

所以，以滾動條為例，同樣的概念可以適用於其他類似的 UI 介面，是不是我們的畫面上常常出現了一些使用者會用不到，甚至會干擾使用者注意力的「貼心」元件呢？如果有的話，或許我們可以試著在使用者需要的時候才讓他適時出現。