Mobile orientation (landscape) scroll bar HTML5/Responsive

Question

I've been building a responsive site and have bumped in to a problem with landscape mobile devices (or more accurately, that particular specified resolution(handheld, screen and (min-width: 480px))) where the scrollbar will only scroll half way down the content in a scrollable container.

If i try to scroll any further it jumps back to the half way point and won't do it.

Here is my CSS:

.Container{
margin: 3% 0 0 10%;
width: 80%; 
}
.Content{
max-height: 80%;
height: 80%;
overflow-y: scroll; 
}

and here is the html:

<div class="Container" style="display: none;">
    <div class="Header">
        <h5>Help</h5>            
    </div>
    <div class="Content">
        <div class="jqContentdiv">
            <p>Lorem ipsum donsequat urna (i've removed the rest of the content to keep this tidy)</p>
        </div>
        <div class="userActions">
            <a href="#"><p>Close</p></a>                                                     
        </div>
    </div>    
</div>

jqContentdiv is just a container floated left.

It's probably important to note that mobile Portrait is fine but i've noticed that if you scroll to the bottom in portrait and then switch to landscape, the scrollbar goes to the halfway point and will go no further. I'm presuming that's linked somehow.

Have any of you come across this before? Any assistance on this would be greatly appreciated.

score 0 · Answer 1 · answered Nov 22 '13 at 10:33

0

Have you tried to use iScroll for this type of behavior.

Its easy to implement and mostly used for mobile sites. You can find link from below url.

http://cubiq.org/iscroll-4

This will help you for orientation as well smoothly.

answered Nov 22 '13 at 10:33

Bhavesh Parekh

212
2
11

I'm trying to avoid plug-ins as much as possible Bhavesh. If it gets to the point where I need to add it then I'll have another look at iScroll. – Rob Owl Nov 22 '13 at 10:38
Then you need to write eventListener for resize for windows where you change change width and height of divs – Bhavesh Parekh Nov 22 '13 at 10:50
Check for this link ===== http://stackoverflow.com/questions/12643314/javascript-max-viewport-height-after-orientation-change-android-ios – Bhavesh Parekh Nov 22 '13 at 11:14

score 0 · Accepted Answer · answered Nov 25 '13 at 08:16

I've decided to go down the JQuery mobile route.

<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js" type="text/javascript"></script>

these inclusions, the css in particular have fixed my problem for me. Adding Jquery mobile to an existing project also adds the mobile styling across the board. As I've already styled this up I didn't need that and so I added data-role="none" with jquery:

$(document).on('pagebeforecreate', function (e) {
    $("p, input, select, h1, h2, h3, a, span, label, textarea", e.target).attr("data-role", "none");
});

to all elements that we didn't require styling. All fonts and scrolling are looking much better and i've got options to handle orientation changes which are going to come in handy.

Thanks for your responses Bhavesh. Your eventlistener suggestion led me to orientation changes which made me decide upon the JQuery mobile solution.

Mobile orientation (landscape) scroll bar HTML5/Responsive

2 Answers2