HTML центрируемая область прокрутки с главной полосой прокрутки и интерактивным фоном - PullRequest
Новая
       46

HTML центрируемая область прокрутки с главной полосой прокрутки и интерактивным фоном

0 голосов
/ 16 апреля 2020

Я создал начало веб-страницы, на которой будет отображаться прокручиваемое текстовое поле, наложенное поверх вращающегося компонента Земли WebGL.

http://jsfiddle.net/d91aLnkm/4/

Компонент заземления интерактивен - пользователь может перетаскивать глобус, перемещая его, и прокручивать, чтобы увеличивать и уменьшать масштаб. Текстовый div также можно прокручивать, и его можно сделать мышью, если он находится над текстовым div. Проблема в том, что полоса прокрутки в главном окне больше не контролирует прокрутку текста, а вместо этого прокручивает (увеличивает) глобус. Это делается путем отключения событий-указателей для div, который содержит div с текстом. Этот родительский div существует для прокрутки страницы и выравнивания по центру дочернего div.

CSS включает в себя следующее, чтобы сделать scrollarea div (parent) и overlay (child) прокручиваемым и отображаемым над фоном: 

#scrollarea{
  position: fixed; /* Sit on top of the page content */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  overflow: auto; /* Scrollable */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  align-items: center;
  pointer-events: none; /* So the globe can still be played with */
}
#overlay {
  position: relative;
  width: 50%; /* Full width (cover the whole page) */
  top: 80%;
  left: 50%;
  transform: translate(-50%, 0%);
  color: blue;
  border: 5px solid green;
  background-color: rgba(255,255,255,0.5); /* Black background with opacity */
  z-index: 3; /* Specify a stack order in case you're using a different order for other elements */
  pointer-events: all;
}

Мой вопрос: есть ли способ активировать события-указатели для элементов фона, чтобы фон оставался интерактивным, при этом позволяя использовать функции прокрутки как с помощью масштабирования двумя пальцами (так и касания?). на мобильном телефоне) и полоса прокрутки текста div?

...