slide out menu bar won't scroll

[drotar]

smart people,
i am redoing my website

http://www.thomasdrotardesign.com/new/

and started utilizing a great slide out menu. after building around this menu i just tested it on my smart phone and noticed that when it slides out i am unable to scroll down the list. it is stuck. any thoughts on how to fix this please.

code pen link is: http://codepen.io/drotars/pen/mOgzRG

thank you
drotar

[Shikkediel]

It being a fullscreen page with a fixed position header, I don’t see much other options than to make the total size of the menu adjust to the screen itself.

[Shikkediel]

After some more thought, there could be a perfectly fine approach after all. Just for posterity:

.drawer-nav {
  height: calc(100% - 30px);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

Best to have a JS fallback that calculates the height as well though, mainly for Android support.

[drotar]

Will give this a try and get back with you. Thank you.

[Shikkediel]

No trouble at all, max-height might be a bit cleaner by the way.

[drotar]

shik,

just tried the code and it works fine on the laptop/desktop but on the iphone/ipad the scroller does not happen. am i missing something here or…..?

appreciate you taking the time.

drotar

[Shikkediel]

Sounds like buggy iOS behaviour, you’re probably best off using absolute position instead. Which shouldn’t be much of a problem with a fullscreen page. Can’t test on any Apple device myself…

Relevant blog article

[drotar]

unfortunately
iOS and android do not allow for scroll bars on these systems. it works perfectly, thank you for the desktop and laptop. but this mobile is killing me. if you come up with anything else please let me know. am trying to do the same on this end. thank you for all your help.

[Beverleyh]

Scrolling of a fixed position container is hinky on iOS so you might have better luck putting a full sized div inside the .drawer-nav and scroll that instead;

.drawer-nav div {
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

[Shikkediel]

Looks like a good tip. Apart from bugs, the style should be valid for both Android and iOS. Scrollbars should still appear (even if not as prominently as on desktop). Note that stock Android has relatively bad support for calc() – only since 4.4.

[drotar]

this is what i have on the drawer.min.css

as i mentioned, it works perfectly on desktop and laptop but on iOS and android devices it is as it was before. perhaps i am adding the css incorrectly? as i have it now…

.drawer-nav{
position:fixed;
z-index:2;
top:15px;
overflow:hidden;
width:16.25rem;
height:100%;
/height: 98%;/
border-bottom: 15px solid white;
color:#222;
background-color: rgba(137,137,137,1.00);
left: 15;
}

.drawer-nav {
max-height: calc(100% – 30px);
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

[Shikkediel]

Nothing that I can see to be out of the ordinary…

Except for the px missing with the last rule of the first element but that won’t be it.

[Shikkediel]

Hi there, @drotar, did you get anywhere with this? Still wondering why the initial setup wouldn’t work correctly. I see you’ve done something to the menu scrolling, which is creating on odd effect on desktop.

[drotar]

i had it working perfectly but am now finding problems on the firefox and chrome iOS menus. working on it as we speak. will keep you informed. also found the adobe animate 2017 cc using html/canvas to be extremely buggy with the truetype font usage. adobe is doing a overhaul of the animate because of it. site again we are referring to is http://www.thomasdrotardesign.com/new/

[Shikkediel]

Cheers for the heads up. I’ve coded over a hundred pages with this functionality without being able to test it, hence my curiosity. I you have a moment, could you perhaps check if those work at all on your mobile devices? Here’s such an example:

http://tamiyaweb.com/optional/parts/53001

Thanks in advance, no hurry.

[Author]

Posts