CSS touch-action 属性

touch-action CSS 属性用于根据用户触摸的变化来更改所选元素的视图，例如，缩放图像，滚动图像等。它是触摸屏用户在在屏幕上选择的特定区域。

注意：平移只不过是在启用触摸的情况下用一根手指滚动。

句法：

touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] ||
 [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation

适当的价值：

• none：这将停止支持浏览器中的所有活动，如手势和平移。
• 自动：这支持浏览器中的所有活动，如手势和平移。
• 泛 x | pan-y： pan-x 支持水平平移交互，类似 pan-y 支持垂直平移。
• 泛左|泛右|平移| pan-down：顾名思义，它们支持向左、向右、向上、向下平移活动。
• pinch-zoom：用于与屏幕进行两指放大和缩小交互。
• 操作：它是 pan-x pan-y 捏缩放交互的组合。

示例 1：以下示例演示了touch-action: none选项。

HTML

  

  

    

        
        

            touch-action:none; -This 
            means we can't perform all 
            paaning and zooming actions
        
    

  

输出：

示例 2：以下示例演示了touch-action: auto选项。

HTML

  

  

    

        
  
        

            touch-action:auto - This means 
            you can pan anywhere on screen
        
    

  

输出：

示例 3：以下示例演示了touch-action: pan-x选项。

HTML

  

  

    

        
        

            touch-action: pan-x;-This 
            means you can only scroll
            /pan in x-direction
        
    

  

输出：

示例 4：以下示例演示了touch-action: pan-y选项。

HTML

  

  

    

  
        
        

            touch-action: pan-y;-This 
            means you can only scroll
            /pan in y-direction
        
    

  

输出：

示例 5：以下示例演示了touch-action: pan-right选项。

HTML

  

  

    

  
        
  
        

            touch-action:pan-right;-This 
            means you can only scroll/pan 
            in right direction
        
    

  

输出：