Scrollable wrapper cuts out absolute elements

by

I came across a problem of cutting off absolute child of relative child of a scrollable list.

My problem: https://youtu.be/uz5wmLEM04A
Live prototype: https://jsfiddle.net/n0dowLhz/
My code (REACT): https://github.com/MoDrazzz/teamguru/blob/team-page/src/components/Teams/TeamMembers.tsx#L30-L34

The problem was also described here. With walkaround they have implemented, when menu is active, after scroll it stays in the same position.

The solution would be to make the menu visible no matter overflow is set to auto.

<!-- Has overflow: auto; --->
<ul>
  <li>
    <p>Some content</p>
     <!-- Must be relative --->
    <div>
      <button>Menu toggler</button>
      <!-- Absolute --->
      <div>Menu</div>
    </div>
  </li>
</ul>

  • “With walkaround they have implemented, when menu is active, after scroll it stays in the same position.” – can you please clarify what that means? I am having a hard time trying to figure out what the problem is supposed to be, based on your fiddle.

    – 

  • In linked article similar issue is presented. To fix it, authors positioned menu using javascript. The problem with that is when user scrolls the list, menu is in the same position.

    – 

The reason why the popup element is being cut is because overflow is hidden. The way to fix that is by taking the popup element outside the container (maybe somewhere in the body element) and position it on the menu on click.

EDIT

Important thing is to disabled any page/container scroll when the popup menu is shown and enable scroll when popup is hidden

Leave a Comment