2018年3月6日 星期二

讓網頁區塊的捲軸在 iOS 裡也有跟整個頁面一樣的回饋效果

在 iOS 裡卷動網頁,相信大家都有經驗是在往上或往下捲超過頁面時,會有一個可以拉超過頁面後「彈」回來的效果,這個是一個很好的 UX 回饋,但僅止於網頁整體,若想要在頁面裡某個區塊裡就不會有這個效果,還好 iOS 內建的瀏覽器可以設定 CSS 後就可以直接支援這個效果,只要使用

-webkit-overflow-scrolling: touch;

就可以了,但記得也要讓你的區塊是可以捲動的。

overflow-y: scroll;

可以用 iOS 的手機開啟這個頁面,捲動下面兩個區塊比較看看。

See the Pen Overflow Scrolling on iOS by Chris Coyier (@chriscoyier) on CodePen.

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...