Колесо мыши прокручивает свободные координаты при изменении размера элемента: необходимо исправить css или javascript - PullRequest
Новая
       17

Колесо мыши прокручивает свободные координаты при изменении размера элемента: необходимо исправить css или javascript

0 голосов
/ 02 октября 2018

У меня есть такой макет: 

<article>
<section id="svgContent"></section>
<section id="content"></section>
</article>

svgContent - это элемент svg, который может быть расширен по требованию - в моем случае это подключенный график.

Элемент раздела содержимогосодержит страницу, обычный материал HTML - содержимое может обновляться, когда пользователи перемещаются по svgContent, например: 

$('Content').empty()
// append new content

Мой макет разделен на две части:

  • svg занимаетвся страница: {width:100vw; height: 100vh;} - полный экран;
  • содержимое, отображаемое в стороне от графика: {width: 60%; } - оно может прокручиваться по вертикали

Прослушиватель колесика мыши прикреплен кsvgContent, чтобы уменьшить и уменьшить масштаб: масштаб будет изменять весь объект svg относительно внутреннего элемента <g>, который соответствует текущим координатам мыши.

РЕДАКТИРОВАНИЕ

Масштабирование работает нормально, когда прокрутка окна равна 0 или x, y для boundingBox Content равен 0: 

window.scrollY = 0
document.getElementById('content') = {  // 0 }

И прокруткав разделе Content это приведет к изменению window.scrollY, в то время как прокрутка (с помощью колесика мыши) на svgContent не изменит его.

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

  • Контент загружается впервые и Страница содержимого не прокручивается
  • Страница содержимого не отображается (display:none)
  • Страница содержимогонаходится вне экрана (transform: translateY(-139%);)

UX зума отключается:

  • , как только я начинаю прокручивать раздел содержимого

Разрывы UX для масштабирования больше не меняются относительно текущего элемента svgContent, на котором находится указатель мыши.

Как убедиться, что svgContent изменен относительно текущих координат мышии игнорировать значение прокрутки страницы КауSed путем прокрутки на других элементах страницы?

Я бы предпочел решение CSS:

Я попытался установить transform-orgin в svgContent, чтобы сместить значение window.scrollY, но сделалне сработает.

В качестве альтернативы решение JS, возможно, более простое, чем открепление и привязка колесика мыши к другим элементам страницы, когда прокрутка сфокусирована на svgContainer, - также должно работать хорошо для сенсорных устройств.

...