Question

我有一个网页，该网页实际上是建立在给定div上的家谱，其中包含有关人的所有元素以及人与人之间的联系，并在该div中进行了绝对定位。然后有导航栏和一些应该固定位置的按钮。

现在，该网站在桌面设备上运行良好，可以在桌面上平移和缩放div，并在浏览器窗口中包含家谱。

为了使其能够在移动设备上运行，我想依靠触摸事件。我接受了https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat网站的推荐，并在我的body元素上做了以下操作：

body { touch-action: none }

以及带有族谱的div（id =“ container”）

#container { touch-action : auto }

目标是冻结网站的正常部分（导航栏和控件），并允许目标div通过触摸事件进行平移和缩放。

但这根本不起作用。

有人可以给我正确方向的决定性提示。

非常感谢！

我在此处添加网站的简化代码

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <div class="logo">
            <h4>The Nav</h4>
        </div>
         <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Projects</a></li>
        </ul>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>
    <script src="app.js"></script>
</body>

</html>

然后样式表就像（简化）：

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    overflow: hidden;
    touch-action: none;
}

nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #5d4954;
    font-family: 'Poppins', sans-serif;
}

如您所见，我将touch-action：none属性放在所有元素上。但对网站完全没有影响

Chris Coyer

Answer 1

尝试使用特定属性代替“自动”，如下所示：

#container { touch-action: pan-x pinch-zoom; }

更改手机上的触摸事件行为

1 个答案: