我們不要那個 overflow hidden 了——如何無痛隱藏單軸內容?
overflow hidden 的限制
舉個例子,比如我想要在一個容器(.container
)內擺放一張圖片(.item
),並且「隱藏圖片 X 軸超過容器寬的部分」(即下圖黃色區塊):
但當我將 .container
設定為 overflow-x: hidden;
時,瀏覽器卻自動把圖片 Y 軸超過容器的部分也藏起來,還提供了滾輪條(scroll bar):
😀 啊???
為什麼會這樣
CSS overflow 規格
擷取自 MDN:
- The initial value of
overflow
isvisible
- The
visible
/clip
values ofoverflow
compute toauto
/hidden
(respectively) if one ofoverflow-x
oroverflow-y
is neithervisible
norclip
規格白話文運動
首先記得 overflow
的預設值是 visible
,接著整理一下值的變化規則:
The
visible
/clip
values ofoverflow
compute toauto
/hidden
(respectively) if…
- 在滿足條件後,原本是
visible
的值會自動變為auto
- 在滿足條件後,原本是
clip
的值會自動變為hidden
然後來看看值的變化條件:
if one of
overflow-x
oroverflow-y
is neithervisible
norclip
於是我們可以得到以下結論:
- 當一個元件的
overflow-x
設定為hidden
時,它滿足了 ”overflow-y
is neithervisible
norclip
” 這段規格中的條件 - 所以,根據規格,該元件的
overflow-y
會自動從預設值visible
變成auto
而 auto
的作用如下:
Overflow content is clipped at the element’s padding box, and overflow content can be scrolled into view using scroll bars.
很不幸地,範例中的圖片在 X/Y 兩軸都超出容器的範圍,所以瀏覽器自動隱藏超出範圍的內容,並且為容器加上 Y 軸滾輪條。
解決方式
(還是同一個例子)把 .container
設定為 overflow-x: clip;
就可以了,因為瀏覽器在 overflow
為 clip
時不會提供我們不要的體貼擅自更動另一軸 overflow
的值。
瀏覽器支援度也沒什麼問題:
參考文件
這篇筆記只有包含 Overflow Clip 這篇厲害原作的部分精彩內容——除了無痛隱藏單軸內容以外,設定成 clip
也能確保 CSS scroll-driven 動畫正常運作,值得一看。