body { overflow: hidden; } [1 SOLUTION]

Question

I have a code I'm working on and found a strange behavior happening. I don't know whether it's SoloLearn on mobile or not, but that's where this weird "bug" is happening. Here is the code I wrote that has this behavior: https://code.sololearn.com/Wh117ebi576o
in the CSS, the main focus is the modal I made with the id's #modalContainer and #searhModal. When the search icon is clicked, I trigger some jQuery javascript:
$("#searchIcon").click(event => {
screenH = window.innerHeight;
$("#modalContainer").css({"height": screenH + "px", "display": "block"});

$("body").css("overflow", "hidden");
});

The goal is to set the modal containers height to the screen height and display it. Simultaneously, I set the body's overlow to hidden so that when the user scrolls to the bottom of the modal, it wont scroll past it into the rest of the page's content (what's the point of a modal if that happens, right?).

When the modal is exited (upon clicking the 'X' in the modal), the modal containers display is n

Answer 1

That is a weird behaviour. But i found a hacky fix. You might like it.

Instead of overflow:hidden
use position:fixed

i.e.
first:
$("body").css("position", "fixed");
then:
$("body").css("position", "initial");
after modal close

Answer 2

Niush sitaula thanks! That seems to work fine for now. Hopefully future updates don't clash with it :)