克服網頁中的「過度滾動」

在Mac 版Chrome 中，「過度滾動」是一種不良效果，它允許用戶將頁面拖到其正常查看區域之外，如所提供的影像所示。若要解決此問題並改善使用者體驗，請考慮以下兩種方法：

方法一：限制過度捲動

如果要完全停用過度捲動，請使用下列CSS 程式碼：

html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}

元素上的 Overflow: hide 屬性可防止任何溢出內容變得可見，從而有效地將頁面限制在其視窗內。

方法 2：自訂過度滾動行為

要自訂和控制過度滾動行為，請使用觸控動作屬性：

body {
    -webkit-touch-callout: none;
    -webkit-touch-action: manipulation;
}

上面的程式碼阻止文字選擇，同時允許常規觸控操作，包括在頁面定義的高度內捲動。為了進行更精細的控制，您可以指定精確的觸控操作值，例如 pan-x 僅允許水平滾動。