0

I've tried to look for a response to this, but even when some questions are similar, I couldn't find any answer to my problem.

In my website I use Sidr JQuery plugin for a left side menu. It is a fixed div with bottom:0, overflow-y: scroll. The main content has a bigger height than the left side menu.

On my mobile (Chrome on Android), when I scroll this menu vertically, it starts scrolling OK but then it gets locked and starts to scroll the main content. Only when main content reaches almost the end, the left side menu also finishes scrolling.

How can I avoid this behavior and have both elements scroll independently from each other?

Thanks!

Ariel C.
  • 33
  • 1
  • 6

2 Answers2

2

For anyone who ends up in the same situation, it was just because SIDR modifies the body while the left menu was open, setting the position of the main content as "absolute".

I've added something like: body.sidr-open { position: fixed !important; } And it solved the problem!

Ariel C.
  • 33
  • 1
  • 6
0

I found if I added 400px of padding to the bottom of the last item in the div.sidr, you can now swipe to the bottom of the menu more easily. Not the best workaround but it seems to have fixed the problem.

kbrinner
  • 121
  • 5