touch-action css屬性 滾動和縮放手勢


CSS 屬性 touch-action 用於指定某個給定的區域是否允許用戶操作,以及如何響應用戶操作(比如瀏覽器自帶的划動,縮放等)

默認情況下,平移(滾動) 和 縮放手勢由瀏覽器專門處理。該屬性用於取消瀏覽器默認手勢行為,開發人員自定義滾動和手勢行為。

touch-action的值:

auto : 當觸控事件發送在元素上時,由瀏覽器來決定進行那些操作,比如viewport進行平滑 縮放。

none : 當觸控事件發生在元素上時,不進行任何操作

pan-x : 啟用單指水平平移手勢

pan-y : 啟用單指垂直平移手勢。

manipulation : 只可以進行滾動和持續縮放操作。如雙擊縮放等別的手勢

pinch-zoom : 啟用多手指平移和縮放頁面,這可以和任何平移值組合 如 touch-action:pan-x pan-y pinch-zoom;

 


最常見的用法時禁用元素(及其不可滾動的后代)上的所有手勢,以使用自己提供的拖放和縮放的行為

touch-action:none;

還有一個用法是使用指針事件處理水平平移的圖片輪播,但不想干擾頁面的垂直滾動或縮放

touch-action:pan-y pinch-zoom;

解決雙擊縮放手勢引起的點擊事件延遲

touch-action:manipulation;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM