当前位置: 首页>>编程示例 >>用法及示例精选 >>正文

CSS touch-action属性用法及代码示例

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

注意：平移只不过是在touch-enabled上使用one-finger滚动。

用法:

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

属性值：

  • none:这将停止支持浏览器中的所有活动，例如手势和平移。
  • auto:这支持所有活动，例如浏览器中的手势和平移。
  • pan-x | pan-y：pan-x支持水平平移交互，而pan-y支持垂直平移。
  • pan-left | pan-right | pan-up | pan-down：顾名思义，它们支持平移活动的左，右，上，下方向。
  • pinch-zoom:这用于与屏幕进行two-finger，zoom-in和zoom-out交互。
  • manipulation:它是pan-x pan-y pinch-zoom交互的组合。

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



HTML

<!DOCTYPE html> 
<html> 
  
<style type="text/css"> 
    body { 
        display:flex; 
        flex-wrap:wrap; 
    } 
  
    .image { 
        margin:1rem; 
        width:300px; 
        height:300px; 
        overflow:scroll; 
        position:relative; 
        margin-bottom:15px; 
    } 
  
    .image img { 
        width:1200px; 
        height:1200px; 
    } 
  
    .touch-type { 
        position:absolute; 
        width:100%; 
        text-align:center; 
        font-weight:bold; 
        top:130px; 
        font-size:24px; 
    } 
  
    .touch-none { 
        touch-action:none; 
  
    } 
</style> 
  
<body> 
    <div class="image touch-none"> 
        <img src=" 
https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png"> 
        <p class="touch-type"> 
            touch-action:none; -This  
            means we can't perform all  
            paaning and zooming actions 
        </p> 
    </div> 
</body> 
  
</html>

输出：

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

HTML

<!DOCTYPE html> 
<html> 
  
<style type="text/css"> 
    body { 
        display:flex; 
        flex-wrap:wrap; 
    } 
  
    .image { 
        margin:1rem; 
        width:300px; 
        height:300px; 
        overflow:scroll; 
        position:relative; 
        margin-bottom:15px; 
    } 
  
    .image img { 
        width:1200px; 
        height:1200px; 
    } 
  
    .touch-type { 
        position:absolute; 
        width:100%; 
        text-align:center; 
        font-weight:bold; 
        top:130px; 
        font-size:24px; 
    } 
  
    .touch-auto { 
        touch-action:auto; 
    } 
</style> 
  
<body> 
    <div class="image touch-auto"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png"> 
  
        <p class="touch-type"> 
            touch-action:auto - This means  
            you can pan anywhere on screen 
        </p> 
    </div> 
</body> 
  
</html>

输出：

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

HTML

<!DOCTYPE html> 
<html> 
  
<style type="text/css"> 
    body { 
        display:flex; 
        flex-wrap:wrap; 
    } 
  
    .image { 
        margin:1rem; 
        width:300px; 
        height:300px; 
        overflow:scroll; 
        position:relative; 
        margin-bottom:15px; 
    } 
  
    .image img { 
        width:1200px; 
        height:1200px; 
    } 
  
    .touch-type { 
        position:absolute; 
        width:100%; 
        text-align:center; 
        font-weight:bold; 
        top:130px; 
        font-size:24px; 
    } 
  
    .touch-pan-x { 
        touch-action:pan-x; 
    } 
</style> 
  
<body> 
    <div class="image touch-pan-x"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png"> 
        <p class="touch-type"> 
            touch-action:pan-x;-This  
            means you can only scroll 
            /pan in x-direction 
        </p> 
    </div> 
</body> 
  
</html>

输出：

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

HTML

<!DOCTYPE html> 
<html> 
  
<style type="text/css"> 
    body { 
        display:flex; 
        flex-wrap:wrap; 
    } 
  
    .map { 
        margin:1rem; 
        width:300px; 
        height:300px; 
        overflow:scroll; 
        position:relative; 
        margin-bottom:15px; 
    } 
  
    .image img { 
        width:1200px; 
        height:1200px; 
    } 
  
    .touch-type { 
        position:absolute; 
        width:100%; 
        text-align:center; 
        font-weight:bold; 
        top:130px; 
        font-size:24px; 
    } 
  
    .touch-pan-y { 
        touch-action:pan-y; 
    } 
</style> 
  
<body> 
    <div class="image touch-pan-y"> 
  
        <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png"> 
        <p class="touch-type"> 
            touch-action:pan-y;-This  
            means you can only scroll 
            /pan in y-direction 
        </p> 
    </div> 
</body> 
  
</html>

输出：

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

HTML

<!DOCTYPE html> 
<html> 
  
<style type="text/css"> 
    body { 
        display:flex; 
        flex-wrap:wrap; 
    } 
  
    .image { 
        margin:1rem; 
        width:300px; 
        height:300px; 
        overflow:scroll; 
        position:relative; 
        margin-bottom:15px; 
    } 
  
    .image img { 
        width:1200px; 
        height:1200px; 
    } 
  
    .touch-type { 
        position:absolute; 
        width:100%; 
        text-align:center; 
        font-weight:bold; 
        top:130px; 
        font-size:24px; 
    } 
  
    .touch-pan-right { 
        touch-action:pan-right; 
    } 
</style> 
  
<body> 
    <div class="image touch-pan-right"> 
  
        <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png"> 
  
        <p class="touch-type"> 
            touch-action:pan-right;-This  
            means you can only scroll/pan  
            in right direction 
        </p> 
    </div> 
</body> 
  
</html>

输出：




相关用法


注：本文由纯净天空筛选整理自saideepesh000大神的英文原创作品 CSS touch-action Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。