當前位置: 首頁>>編程示例 >>用法及示例精選 >>正文

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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。