Отключить прокрутку для div с SVG

У меня есть SVG-диаграмма с использованием d3js. Мы можем добавить некоторые точки к этой диаграмме и перенести ее. Когда у меня есть большая страница, поэтому, когда нам нужно ее прокрутить, она работает с мышью. Но у меня есть экран ввода с поддержкой multi-touch, и я больше разрабатываю свое приложение для мобильных устройств.

Вход с диаграммой и прокруткой не работает вместе с касанием входа. Например, если я хочу переместить мою точку, это страница, которая прокручивается, а не моя точка, которую нужно переместить. Это не совсем те же ошибки в Firefox, IE и моем приложении Windows RT.

Вы можете увидеть небольшой пример здесь, чтобы проверить, есть ли у вас сенсорный ввод, я полагаю, что планшет и смартфон будут иметь такое же поведение, как мой компьютер с сенсорным экраном. У меня есть следующий css для моделирования большего приложения:

body {
overflow:visible;
width: 2000px;
height: 2000px;
}

Есть способ сделать это?

Надеюсь, вы поняли мою проблему :)

2 ответа

Я финнали нашел решение с свойством указателя-событий в css

var C1 = document.getElementById("C1"),
 evtIn = window.navigator.msPointerEnabled ? "MSPointerDown" : "touchstart",
evtOut = window.navigator.msPointerEnabled ? "MSPointerUp" : "touchend";


C1.addEventListener(evtIn, function () {

 d3.select("#C1").style("pointer-events", "all");

 d3.select("body").style("overflow", "hidden");

}, false);

C1.addEventListener(evtOut, function () {

 d3.select("#C1").style("pointer-events", "none");

 d3.select("body").style("overflow", "auto");

}, false);

При касании я просто разрешаю события указателя в моем графике и отключении переполнения, а в другом - для касания.


Я проверил это на своем телефоне и попытался выяснить, как заставить браузер прекратить прокрутку с небольшим успехом. Хорошей новостью является ваше приложение, позволяющее мобильному пользователю легко разместить новый пункт.

Чтобы быстро выполнить проект, вам может потребоваться создать набор элементов управления, которые захватывают идентификатор каждой существующей точки и позволяют мобильному пользователю перемещать нужную точку с помощью кнопок. Пользовательский интерфейс для такого набора элементов управления может быть минимальным и интуитивно понятным, если сделать это хорошо. Вы можете настроить UI для отображения: none и показывать только, когда ширина/высота экрана - размер iPad или меньше.

licensed under cc by-sa 3.0 with attribution.