Page scrolls to middle on update
Added by Mark Travis over 1 year ago
I've got a page of my website that has several panels of information, mostly statistical reporting of a process.
When I start "the process", the page scrolls down to the middle of all of these panels on the page intead of staying in the area that the user was scrolled to, ideally the top where the main information is.
Is there a way to keep the page from scrolling? If not, what can I do to scroll to the top or a location of my choosing?
Replies (3)
RE: Page scrolls to middle on update - Added by Mark Travis over 1 year ago
Here's some more information to help.
I have 4 large .div sections painted on the page.
The very top part of the 3rd large .div and all of the 4th large .div is off-screen. I'm making an update to all of the .divs that causes the 3rd .div to delete a handful of internal .divs and re-add a new handful of internal .divs (they are all WCartesianChart .divs inside one large .div).
The refresh of the 3rd large .div; when it is scrolled off screen; causes the webpage to scroll down and center the 3rd large .div.
This is driving me insane because the 1st and most of the 2nd .divs are scrolling off the top of the browser window.
I tried the following after the update block to no avail:
doJavaScript(theFirstDiv->jsRef() + ".scrollTo(0,0);");
as well as:
doJavaScript(this->jsRef() + ".scrollTo(0,0);");
from the topmost .div container for the whole page.
I even tried to do a wApp->deferRendering and resumeRendering and that did nothing at all. (I know... I was grasping at straws with that last one.)
RE: Page scrolls to middle on update - Added by Matthias Van Ceulebroeck over 1 year ago
Hello Mark,
there are not many elements that will perform a scroll. Are you certain you are not calling a WAbstractItemViewt::scrollTo somewhere? Or that a anchor link isn't being set somewhere to the URL (e.g. www.example.com#section)?
RE: Page scrolls to middle on update - Added by Mark Travis over 1 year ago
Matthias, thanks for the reply!
It ended up residing in the Bootstrap 5 theme I'm using, where I have a toggle switch to set a boolean on and off. I found some javascript that was executing when the switch's state is changed, programmatically or user-initiated, that pulls focus to that part of the page.
For now, I've rearranged my screen to put the toggles at the top, which is working great for now. Eventually, I'll re-write that part of the theme or submit a bug report to the theme vendor.