Question

I'm using Google Chrome on Android while I build a mobile-friendly site. I am using jQuery Mobile's Panels functionality to add a hideable menu to the left of my site. When the menu is hidden, I can scroll up and down the page with no problems, and doing so causes the URL bar at the top of the browser to go in and out of view. This is working as expected.

However, once I expand the hidden menu panel and scroll down, the page scrolls itself back to the top every time that the URL bar changes visibility. If I scroll down (pushing the page up) and hide the bar, it scroll back to the top. Now that the bar is hidden, I can scroll down without issue. Once I scroll back up again (pulling the page down, revealing the URL bar), the page once again snaps to the top. Now that I'm at the top of the page (past where I wanted to scroll to) I have to scroll down again, which once again hides the URL bar, and snaps the page to the top. This repeats as long as my scrolling alternates the URL bar between visible and invisible. It's infuriating.

I suspect this has something to do with the changing size of the device's viewport, but I don't know enough to be sure. Does anyone know what's causing this or, more importantly, how to fix it?

Here is the gist of my code:

<div id="container" class='' align="left" data-role="page" data-ajax="false">
    <div data-role="header"><!-- my header --></div>
    <div id="myHiddenPanel" class='ui-panel' data=role="panel" data-position="left" data-display="reveal"><!-- Tall menu options --></div>
    <div id="mainContent" class="ui-content"><!-- Tall Main content --></div>
</div>

Please note that I am also using Bootstrap for this site, but it is not being used for these elements specifically.

Answer 1

Well, much to my surprise, I was able to find a way of fixing this.

According to this post, this may be a bug in jQuery Mobile. It's easily worked around by editing the .js file or overriding the widget by adding your own version of it.

I am using the minified version, so I was able to fix it by replacing this bit of code

...e.resetActivePageHeight(d)),b&&this.window[0].scrollTo(0,a.mobile.defaultHomeScroll)):c._fixPanel()},_bi...

with this

...e.resetActivePageHeight(d)),b/*&&this.window[0].scrollTo(0,a.mobile.defaultHomeScroll)*/):c._fixPanel()},_bi...

Just search for that snippet in Minified jQuery Mobile to replace it, or follow the instructions on the linked page if you're using the non-compressed version.

Page scrolls to top when URL bar changes visibility

1 个答案: