0

When I have an input with a position: absolute style inside a div that has overflow: scroll (or any kind of overflow that is not visible), and when the div is indeed overflowing, the html element gains a vertical scrollbar of the height of the overflowing content.

It is shown in the following snippet:

<!DOCTYPE html>
<html>
  <body>
    <div style="height: 80vh;display: flex;width: 20rem;">
      <div style="overflow: scroll;">
        <hr style="width: 0; height: 200vh; margin: 0 10rem;" />
        <input style="position: absolute;" />
      </div>
    </div>
  </body>
</html>

If you remove the <hr/> element, the global scrollbar disappears because the inner div is not overflowing any more. if you replace the <input> element with an empty <div> the problem is not showing any more.

My question is:

  • Why are global scrollbars appearing (on the html element)?

  • How can I prevent it? I can set overflow: hidden on the html element but sometimes on reload, the page is not scrolled to top and the top of the page is no longer visible. overflow: clip is not yet usable.

Background: I have a page with an interface that takes all the visible viewport and there is no page scrollbars. Any scrollable content is managed within the page with overflow properties. I have input elements within that I hide using the position: absolute CSS property (among others) to ensure that they are still focusable.

Mildred
  • 463
  • 4
  • 13

1 Answers1

0

A solution is to put a position: relative property on the overflow element:

<!DOCTYPE html>
<html>
  <body>
    <div style="height: 80vh;display: flex;width: 20rem;">
      <div style="overflow: scroll;position:relative;">
        <hr style="width: 0; height: 200vh; margin: 0 10rem;" />
        <input style="position: absolute;" />
      </div>
    </div>
  </body>
</html>

But it doesn't work with isolatiob: isolate although I would have thought it would work:

<!DOCTYPE html>
<html>
  <body>
    <div style="height: 80vh;display: flex;width: 20rem;">
      <div style="overflow: scroll;isolation: isolate;">
        <hr style="width: 0; height: 200vh; margin: 0 10rem;" />
        <input style="position: absolute;" />
      </div>
    </div>
  </body>
</html>

Related documentation: MDN on stacking contexts

Mildred
  • 463
  • 4
  • 13
  • isolation won't work because it establish a stacking context and not a containing block for absolute element. `transform: translate(0);` will work for example ( more details here: https://stackoverflow.com/a/52937920/8620333) – Temani Afif Dec 23 '20 at 19:42