StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>In fact all you need to address this issue for iOS devices (iPad, iPhone, etc) is to add the following to your CSS:</p> <pre><code>#container { position:fixed; top:120px; bottom:0px; overflow:auto; } </code></pre> <p>This example is assuming that:</p> <ul> <li>the part you want to scroll starts 120px below your header (ie the header will be 120px high)</li> <li>the div you want to have scrolling has an id='container'</li> <li>you will use 2 fingers to scroll it. If you use one finger then the header will move as well.</li> </ul> <p>This actually is pretty cool on iPad as it gives the user a choice (move the whole thing or keep the header visible by using one or two fingers). It also works for footers (change bottom value).</p> <p>Finally note that this is for "Apple" browsers (I successfully tested it on iPad and Mac Safari and Chrome) so if you want to support something else you WILL have to create different codes using something like :</p> <pre><code>if (navigator.userAgent.match("Apple") == null) { /* use a different container id */ } </code></pre> <p>Edit on Oct 7, 2011: Thx to chris-barr.com I found this solution. Simply add this code:</p> <pre><code><script> function touchScroll(id){ var el=document.getElementById(id); var scrollStartPos=0; document.getElementById(id).addEventListener("touchstart", function(event) { scrollStartPos=this.scrollTop+event.touches[0].pageY; event.preventDefault(); },false); document.getElementById(id).addEventListener("touchmove", function(event) { this.scrollTop=scrollStartPos-event.touches[0].pageY; event.preventDefault(); },false); } </script> <body onload="touchScroll('container')"> </code></pre> <p>and it will work in iOS (iPhone, iPad) AND Android WITH ONLY ONE FINGER !!!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload