News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

[GH#3765] Mobile menu scrolling issue

Started by @rjen, October 21, 2016, 02:32:54 AM

Previous topic - Next topic

@rjen

I seem to have posted this incorrectly in the 2.1 support board, so I will post is here now (I do not know how to post in Github b.t.w)

Quote from: @rjen on October 20, 2016, 04:58:52 PM
Follow up question after I upgraded my test forum to Beta3: I like the new mobile menu, that was needed.  :)

Now I find that because I have added a few menu options the Mobile menu is not quite as usefull, specifically on the smaller mobile screen (using a samsung galaxy S4 for this, so not even the smallest there is).

The menu is showing as an 'overlay' on the forum, but does not allow me to scroll: when I swipe up, the forum underneath the menu scrolls, but not the menu itself.  As you can see in attachment 1, the last menu option (logout) is not on screen anymore, and because I cannot scroll I cannot get to it. Problem is even worse when I open one of the submenu's (attachment 2), now multiple options fall off the screen...

It would be better if the menu itself could also be moved up to prevent this problem.
Hope this can be fixed in the next version?

You can see the example here: http://test.fjr-club.nl/
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

nend

You have to set the overflow to hidden for the HTML document when you set the overlay. This prevents the document underneath from scrolling while the lights are dim.

Here is what I use on one of my sites. I get the scroll position also to have a smooth transaction. It does jump a little because the scrollbar disappears, but it does the trick.

function si_lockscroll(lights) {
    var scrollPosition = [self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft, self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop];
    var html = jQuery('html');
    html.data('scroll-position', scrollPosition);
    html.data('previous-overflow', html.css('overflow'));
    html.css('overflow', 'hidden');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);
    if (lights !== true && $('#lights-overlay').css('display') == 'none') $('#lights-overlay').fadeToggle(200);
}

function si_unlockscroll(lights) {
    var html = jQuery('html');
    var scrollPosition = html.data('scroll-position');
    html.css('overflow', html.data('previous-overflow'));
    window.scrollTo(scrollPosition[0], scrollPosition[1]);
    if (lights !== true && $('#lights-overlay').css('display') != 'none') $('#lights-overlay').fadeToggle(200);
}


You can take a look at the site in my profile for an example. You may have to register though, because the big menu's are for logged in users. ;)

However this does look like a little interface bug in 2.1.

Antes


Advertisement: