У меня есть веб-страница, которая, по сути, является семейным древом, построенным на данном div, со всеми элементами о людях и связях между людьми с абсолютным позиционированием внутри этого div. Затем есть панель навигации и несколько кнопок, которые должны иметь фиксированное положение.
Теперь сайт хорошо работает с рабочими столами, где можно перемещать и масштабировать div с помощью родословной внутри окна браузера.
Чтобы заставить его работать на мобильном телефоне, я хотел положиться на сенсорные события.
Я принял рекомендацию сайта Криса Койера и сделал на своем теле следующее:
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 на все элементы.
Но никак не влияет на сайт
https://rocky -refuge-29352.herokuapp.com /