I have a div, with a list of divs, that exceeds the height of the browser window.
Each div is an item of interest, with a onClick event.
Exposing the bad behavior of dialog.showModal():
Scroll To Bottom Of List Causing Top Of Page To Scroll Out Of Sight.
User clicks on a DIV, in the list, and an event is triggered that calls for a dialog to be opened with showModal()
oDlg.showModal() ;
The Page Is Scrolled Back To The Top Causing The div that was clicked on to now scroll out of view below the bottom of the browser window, then the dialog is made visible.
All I Want To Do Is Stop The Body From Scrolling.
I have seen many suggestions that do not work dating back from 2012.
I am hoping since it is now middle of 2024; there is an actual solution to this design flaw of showModal().
Why can the dialog not just open exactly over where the body is currently positioned.
I have tried scrolling the page after the dialog is opened; but then the dialog is scrolled off the top of the page.
I have seen suggestions like <a href=”javascript(void), bootstrap, jquery, body{position:absolute;}.
I tried the position of body; did not change the behavior of showModal.
I am using Pure HTML, Javascript and CSS.
I believe that this behavior, of showModal, is a defect!