首頁 > web前端 > css教學 > 如何消除 Mac 版 Chrome 中不需要的「過度滾動」?

如何消除 Mac 版 Chrome 中不需要的「過度滾動」?

Patricia Arquette
發布: 2024-10-30 10:32:03
原創
540 人瀏覽過

How to Eliminate Unwanted

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

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

方法1:限制過度滾動

如果要完全停用過度滾動,請使用以下CSS 代碼:

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

body {
    height: 100%;
    overflow: auto;
}
登入後複製

overflow: 上的隱藏屬性元素可防止任何溢出內容變得可見,從而有效地將頁面限制在其視口內。

上的 Overflow: auto 屬性元素允許在頁面指定高度內自然捲動,但限制過度捲動。

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

要自訂和控制過度滾動行為,請使用touch-action 屬性:

body {
    -webkit-touch-callout: none;
    -webkit-touch-action: manipulation;
}
登入後複製

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

以上是如何消除 Mac 版 Chrome 中不需要的「過度滾動」?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板