How to make a modal window scroll? And make the scroll pressed to the top by default?

Design help Layout & Design
1

Dear forum members, really need your help! I’m about to hand in a project, and I’ve been trying to solve one problem for half a day.

  • I have a modal window.
  • For the mobile version I had to add to the modal window - scroll.
    -! But the problem is that on the published site, in the mobile version, when I open the modal window, the scroll is pressed down, showing the end of the content. And I need the scroll to be at the top. At the beginning of the modal window content.

Maybe you have a tutorial how to make this scroll in the modal window.

Please tell me how to solve this problem(((
I will be very grateful !

Photo from developer mode: scroll is there, but pressed to the bottom

Screenshot_8
Screenshot_8421×665 59.8 KB

Ссылка на сайт:
https://abc-activity.webflow.io/

Режим просмотра:
https://preview.webflow.com/preview/abc-activity?utm_medium=preview_link&utm_source=designer&utm_content=abc-activity&preview=3eba83cc90dc7e4c8eaae5c47c744ed1&workflow=preview

1 Like
2

Hello Pavel
i tried to find the reason of this problem with inspect
i realized that when i remove the button in your modal
scroll problem does not happen
and in your modal button i think if you change tabindex = “0” to tabindex = “-1”
your problem will be fixed

Snapshot_240428153034
Snapshot_2404281530341366×641 114 KB

3

CSS: Ensures the modal is styled correctly and is scrollable.
JavaScript:
modalContent.scrollTop = 0; ensures the scroll position is at the top when the modal is opened.
Functions to open and close the modal.