1

I have fixed parent div, that contains elements with absolute position, that overflow parent size, and a fixed element with high z-index, that hovers as parent as far as another child’s.

Code:

<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>

There are a lot of questions about how to prevent scrolling the parent when scrolling the fixed child, but what do I need is vice-versa. I need to make parent scroll, even if the mouse, or the touch is dealing with fixed child.

In iOS it actually works, but in Android, when I trying to scroll touching the fixed div - nothing happens.

What do I need to do to make parent scrolling, when the fixed child is scrolled(fixed child overflow is auto) on Android?

Also, the code above

On iOS and on Android

enter image description here enter image description here

I need when I touching(scrolling) red rect make the parent(grey) div scrolling.

Community
  • 1
  • 1
Artur
  • 325
  • 2
  • 16

2 Answers2

0

This answer is the solution. Even no javascript required.

I need to add the next style to the fixed child element:

pointer-events: none;

Artur
  • 325
  • 2
  • 16
  • That's... weird. This prevents any interactions by mouse/touch in your fixed element. That includes clicking links and buttons inside the fixed element. If that's not an issue to you, fine, but be sure that's what you want. – Pedro Lima Apr 28 '20 at 11:39
  • @PedroLima You are absolutely correct, but for my case, fixed element, indeed, doesn’t have any own child elements, especially clickable – Artur Apr 28 '20 at 13:54
-1

Are you working on mobile App development? if yes, which framework your using. based on that I suggest the best way.

Normally,

if you don't want scroll option for parent or any div set to overflow:hidden, or other wise set to overflow:auto

s sai yaswanth
  • 7
  • 3
  • I think I have clearly explained that I do want to make parent scroll, even if I scrolling one of the fixed child element. On Android, I tested it in Chrome and in WebView - all the same – Artur Apr 28 '20 at 10:46
  • @Artur no, you have _not_ explained the problem properly. All the minimal code you have given us so far produces on its own, is https://jsfiddle.net/Lfmtebnv/ You need to provide a _proper_ [mre] of the issue, directly in your question. So please go and edit accordingly. – CBroe Apr 28 '20 at 11:06
  • @s sai yaswanth, this is not an Answer. If you need more clarifications from OP on a poorly formatted question - use the comments section. – Pedro Lima Apr 28 '20 at 11:35