OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Stop/Prevent body From Scrolling To Top On dialog.showModal() [closed]

  • Thread starter Thread starter IT Serenity
  • Start date Start date
I

IT Serenity

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

Latest posts

A
Replies
0
Views
1
Ashrik Ahamed
A
A
Replies
0
Views
1
Ashrik Ahamed
A

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top