Можно ли отключить прокрутку для пользователей, оставив ее включенной для JavaScript? - PullRequest
0 голосов
/ 03 апреля 2019

Есть ли способ отключить прокрутку для пользователя, оставляя возможность изменять, скажем, scrollTop и scrollLeft для самого приложения?

Когда мы говорим «прокрутка», мы на самом деле имеем в виду Scroll, потому что установка .style.margin, .style.transform или .style.left / top all вызывает принудительное размещение, что вызывает проблемы в браузере, который мы должны поддерживать.

В качестве альтернативы, кто-нибудь знает, какая особая разница между Webkit (Safari) и Blink (Chrome) заставляет их так по-разному обрабатывать вынужденные макеты, вызванные стилем?

У нас есть приложение, которому по разным причинам необходимо визуализировать около 18 000 узлов DOM, а затем плавно перемещаться по области просмотра, чтобы пользователь мог просматривать определенный набор из них в любой момент времени.

Это легко сделать в Chrome и Firefox, используя систему координат и устанавливая .style.left и .style.top в элементе области просмотра, но, конечно, получая доступ и изменяя их, вынуждаете макет. Chrome и Firefox могут видеть, что нам это на самом деле не нужно, и не делаем этого. Safari, тем не менее, фактически каждый раз выполняет раскладку, что накладывает на пользователя задержку навигации, составляющую почти целую секунду.

Альтернативой доступа к .style может быть использование .scrollLeft и .scrollTop (увы, мы уже пробовали использовать преобразования, но это требует, чтобы большой блок DOM-узлов прокручивался, что позволяет пользователю самим прокручивать в кляксе (скажем, колесиком мыши или толстым пальцем на телефоне), что нежелательно.

Короче говоря, мы хотим, чтобы приложение могло прокручивать в определенные места, когда пользователь сообщает об этом определенным образом, но мы не хотим, чтобы пользователь мог прокручивать элемент, не взаимодействуя с этими конкретными способами. , потому что это создает плохой пользовательский опыт.

Мы знаем, что рендеринг меньшего количества контента может замаскировать проблему, мы уже изучаем это, но это блокирует определенные действия, которые клиент сочтет желательными.

/ edit / Мы также попытались динамически создать классы CSS для каждой позиции, которая может нам понадобиться (да, мы воссоздаем их при изменении размера браузера), и даже используя эти классы, чтобы обойти встроенные стили, мы получаем обмолот макета из Safari .

1 Ответ

0 голосов
/ 04 апреля 2019

Очевидно, что overflow-hidden не является наследуемым атрибутом, поэтому наше предположение, что дочерний элемент будет иметь его, если родительский объект был ошибочным.

Поскольку атрибут переполнения не был установлен для прокручиваемого дочернего элемента вообще, прокруткане удалось при попытке.

Когда к элементу было правильно применено скрытое переполнение, мы восстановили возможность прокрутки, не позволяя пользователю прокручивать нежелательно.

... и также почувствовалинемного глупо.

...