Сделать фиксированный дочерний div НЕ препятствовать прокрутке родителей - PullRequest
0 голосов
/ 28 апреля 2020

У меня есть фиксированный родительский div, который содержит элементы с абсолютной позицией, который переполняет родительский размер, и фиксированный элемент с высоким z-индексом, который находится как родительский элемент до родительского элемента.

Код:

<div style="position:fixed;width:70%;height:70%;overflow-y:scroll;z-index:100;background:lightgrey;overflow-x:hidden">

<div style="position:absolute;width:50%;height:10%;z-index:1;background:darkgrey;top:10%"></div>
<div style="position:absolute;width:50%;height:10%;z-index:1;top:30%;background:darkgrey"></div>
<div style="position:absolute;width:50%;height:10%;z-index:1;top:50%;background:darkgrey"></div>
<div style="position:absolute;width:50%;height:10%;z-index:1;top:70%;background:darkgrey"></div>
<div style="position:absolute;width:50%;height:10%;z-index:1;background:darkgrey;top:90%"></div>
<div style="position:absolute;width:50%;height:10%;z-index:1;background:darkgrey;top:110%;"></div>

<div style="position:fixed;width:100%;height:20%;z-index:1000;background:red"></div>

Есть много вопросов о том, как предотвратить прокрутку родителя при прокрутке фиксированного потомка, но мне нужно наоборот. Мне нужно сделать родительскую прокрутку, даже если мышь или касание имеют дело с фиксированным потомком.

В iOS это на самом деле работает, но в Android, когда я пытаюсь прокрутить касаясь фиксированного div - ничего не происходит.

Что нужно сделать, чтобы прокрутить родительский элемент, когда прокручивается фиксированный дочерний элемент (фиксированный дочерний элемент overflow равен auto) на Android?

Также код выше

Вкл. iOS и Вкл. Android

enter image description here enter image description here

I нужно при касании (прокрутке) красного прямоугольника сделать родительский (серый) div прокруткой.

Ответы [ 2 ]

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

Этот ответ является решением. Даже javascript не требуется.

Мне нужно добавить следующий стиль к фиксированному дочернему элементу:

pointer-events: none;

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

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

Обычно,

, если вы не хотите, чтобы опция прокрутки для родителя или любой div был установлен на переполнение: скрытый, или другой мудрый набор на переполнение: авто

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