slide out menu bar won't scroll - CSS-Tricks

This topic is empty.

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

Author

Posts
December 22, 2016 at 3:00 pm #249223

drotar
Participant

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

December 23, 2016 at 1:05 am #249238

Shikkediel
Participant

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.

December 23, 2016 at 9:34 pm #249294
Shikkediel
Participant
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.
December 24, 2016 at 12:09 am #249296

drotar
Participant

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

December 24, 2016 at 12:43 am #249298

Shikkediel
Participant

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

January 4, 2017 at 12:03 pm #249686

drotar
Participant

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

January 4, 2017 at 12:17 pm #249688

Shikkediel
Participant

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

January 4, 2017 at 12:24 pm #249690

drotar
Participant

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.

January 4, 2017 at 12:25 pm #249691
Beverleyh
Participant
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;
}
```
January 4, 2017 at 12:30 pm #249692

Shikkediel
Participant

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.

January 4, 2017 at 12:33 pm #249693

drotar
Participant

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;
}

January 4, 2017 at 1:36 pm #249696

Shikkediel
Participant

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.

February 6, 2017 at 9:05 am #251041

Shikkediel
Participant

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.

February 6, 2017 at 9:24 am #251042

drotar
Participant

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/

February 6, 2017 at 10:29 am #251046

Shikkediel
Participant

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

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

The forum ‘JavaScript’ is closed to new topics and replies.