touch-action屬性

項目里面出現(xiàn)增加了一個橫向滾動的商品(整個屏幕是可以上下滑動的)。手指按在橫向商品區(qū)時在ios上可以上下滑動,但是安卓上不能上下滑動。

后面發(fā)現(xiàn)是加了touch-action: pan-x;(啟用單指水平平移手勢);

  • 去掉就行了。

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

  • auto
    當(dāng)觸控事件發(fā)生在元素上時,由瀏覽器來決定進(jìn)行哪些操作,比如對viewport進(jìn)行平滑、縮放等。
  • none
    當(dāng)觸控事件發(fā)生在元素上時,不進(jìn)行任何操作。
  • pan-x
    啟用單指水平平移手勢??梢耘c pan-y 、pan-up、pan-down 和/或 pinch-zoom 組合使用。
  • pan-y
    啟用單指垂直平移手勢??梢耘c pan-x 、pan-left 、pan-right 和/或 pinch-zoom 組合使用。
  • manipulation
    瀏覽器只允許進(jìn)行滾動和持續(xù)縮放操作。任何其它被auto值支持的行為不被支持。啟用平移和縮小縮放手勢,但禁用其他非標(biāo)準(zhǔn)手勢,例如雙擊以進(jìn)行縮放。 禁用雙擊可縮放功能可減少瀏覽器在用戶點擊屏幕時延遲生成點擊事件的需要。 這是“pan-x pan-y pinch-zoom”(為了兼容性本身仍然有效)的別名。
  • pan-left,pan-right,pan-up,pan-down
    啟用以指定方向滾動開始的單指手勢。 一旦滾動開始,方向可能仍然相反。 請注意,滾動“向上”(pan-up)意味著用戶正在將其手指向下拖動到屏幕表面上,同樣 pan-left 表示用戶將其手指向右拖動。 多個方向可以組合,除非有更簡單的表示(例如,“pan-left pan-right”無效,因為“pan-x”更簡單,而“pan-left pan-down”有效)。
    *pinch-zoom
    啟用多手指平移和縮放頁面。 這可以與任何平移值組合。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容