search

harvesthq / Sidetap

Sidetap is a simple framework that allows you to quickly build platform-independent mobile web interfaces.
http://harvesthq.github.io/Sidetap/
Other
610 stars 112 forks source link

Nav Doesn't Scroll #3

Open pfiller opened 12 years ago

pfiller commented 12 years ago

If the nav is taller than the viewport, there's no way to get to the bottom.

syropian commented 12 years ago

Sad to see this issue hasn't been addressed. Any chance for a fix yet? I tried setting an overflow-y on all sorts of things, and nothing's working.

steve228uk commented 11 years ago

I've managed to get this working on my project.

Here's the layout of my sidetap nav

<div class="stp-nav"> <div> <div class="searchBox"> <input type="text" placeholder="Search"> </div>

<div class="scrollNav"> <div class="scrollNav"> <nav> <a href="#posts" class="selected">Posts</a> <a href="#groups">Groups</a> <a href="#following">Following</a> <a href="#followers">Followers</a> </nav> </div> </div>

</div> </div>

The scrollNav is just a div with the following styles

.scrollNav{ overflow-y: scroll; -webkit-overflow-scrolling: touch; }

By wrapping it in two divs you stop the user from being able to pull the top of the browser and showing the usual bounce-back behaviour on iOS.

This seemed to work but I had a problem with it bouncing back. It looks like Sidetap gives the nav the height of the entire page which breaks the scrolling.

To fix this I set the height of it in my JS.

var height = $(window).height()-44+'px'; $('.scrollNav').css('height', height);

The "-44" is because I've added a search box above so to get the correct height I needed to take that out of the equation.

jampafoo commented 11 years ago

Thanks! Works pretty good, but there are some issues I have encountered with this code.

I have been trying all kinds of things but can not get it to work completely... there is an issue with height of scroll area ... also, if the phone is turned vertically or horizontally on load. All of the nav items are not visible and get cut off even with scroll.

Also, I know this is meant more for iOS... but, this does not currently work on Android phones that I have tested. So, still trying to make a fix for that too.

Thanks for this! This is a great start for me.

steve228uk commented 11 years ago

@jampafoo Yeah, the Android issue was one I was aware of. I guess adding some kind of JS based scroll as SideTap implements for the main content area would be the ideal solution.