We Keep Coding

IOS scrolling issues (elastic scroll and bounce)

I have developed a site that has a fixed footer and header.
The content is also fixed (but that is only because the footer and header can be hidden, but I won't be showing that in my example).
The issue I have is with iPhones and iPads. They are two issues I have had.
Once is it allowing me to drag the header and footer past the confines of the body/html showing whitespace (no idea why they do this) and the other issue is it stopping scrolling as soon as I let go with my finger.
The latter seems to be solvable by doing this:
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
Although I have read that this is not a supported CSS attribute, it does seem to do the trick.
The second issue I have tried to solve with JavaScript by making the header and footer non-scrollable, but it doesn't seem to work properly.
The JavaScript is simple enough:
function disableElasticScroll(e) {
e.preventDefault();
};
which I can put on an element like this:
ontouchmove="disableElasticScroll(event)"
This does not have the desired effect.
I have set up a codepen to highlight the issue. If you have an ipad, have a look. First drag the content inside the .content area. That works nicely (thanks the the -webkit solution). If you then try and drag the .header or .footer you will notice that you can't drag it and no scrolling is happening (again this is good and is due to the JavaScript), but if you try to then scroll the .content again, you will notice that it drags the entire page and does the elastic scroll rubbish.
https://codepen.io/r3plica/pen/LzRQaZ

There is a way to do this so that you don't have to fix the scrolling container. Try positioning your header and footer with a fixed position then padding the body of your page by the height of those elements. This way your page will scroll normally without any hacks. It might look something like this:
body {
padding-top: 60px;
padding-bottom: 40px;
}
header.global {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
}
footer.global {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
}

html, body {
position: fixed;
}
try setting this css property and see if it works.
It solves the elastic scrolling effect on the body.
Sample page
Output to test on ipad

Bootstrap affix() plugin having issue while scrolling the content

I'm trying to use the Bootstrap affix() plugin. I want the navbar to pin to the top of the screen when I scroll. here is what i have so far:
http://jsfiddle.net/zncud7md/2/
The issue is the content below navbar shifts (tiny bit of inch downwards) when the affix class triggers in. I even tried adding the:
#header.affix + #body { padding-top: 75px; } that i found on other sources but didnt work for me.
I'm unable to find a way around this. Any ideas how can i prevent this issue??
Thanks!!

Bootstrap affix acts like sticky positioning so that if you scroll, you can have an element stick to a fixed position (http://getbootstrap.com/javascript/#affix).
Instead, you can simplify your code by setting your header position to fixed at top:0 and pad the top of your body.
#header {
position: fixed;
top: 0;
z-index: 9999;
}
#body {
padding-top: 75px;
}
http://jsfiddle.net/zncud7md/4/

How can I place a link at the bottom of the viewport on first page load?

I'm trying to achieve an effect similar to the one seen here on Dropbox's landing page. Notice that there's a link at the bottom of your browser viewport ('learn more'). This is always at the bottom of the page on first load. However, it's not fixed to the bottom of the window as you can scroll past it.
Any idea how to achieve this? A CSS or jquery solution is fine.

It's a link within a div which has the following CSS (the div's):
position: absolute;
bottom: 50px;
left: 0;
width: 100%;
text-align: center;
cursor: pointer;
The important parts there are position:absolute and bottom:50px

How do I stop a fixed, 100% width element from overlapping the browser's scroll-bar?

My website has 4 columns-each for one of the pages. Thus, the width of the mask in the wrapper is 400%. Navigation is made with the scrollTo jquery plugin, both vertically and horizontally.
Because the navigation bar was set to position: fixed; and width: 100%;, it was overlapping the div's scroll. I gave it right: 17px; but it also makes the pages scroll +17 extra pixels.
Is there any way of setting the width of each of the pages to 100% - 17 pixels?
Otherwise, how to avoid putting right: 17px; on navigation without having to overlap the scroll?
Link to the website: www.inbrackets.dk/test

I would not mess with the right positioning at all. Your scroll bar is on your #wrapper div, and since it is position: absolute, I would adjust some settings on that to get the scroll bar to sit below the #nav.
First, remove the height from the #wrapper and then change/add the following css to #wrapper:
top: 70px ; /* clears your nav */
bottom: 0px; /* gives it the height; puts the scroll bar at the bottom of the screen */

Simplest solution is to use calc.
width: -webkit-calc(100% - 17px);
width: calc(100% - 17px);
However this has limited support - it is not supported in IE8 and lower.
sidenote: in several browsers, especially on windows machines the scrollbar is 20px wide, so you need right:20px. Also your font is extremely hard to read on my machine:

I would avoid using calc, and set your fixed nav to just span left: 0, and right: 0;
position: fixed;
top:0;
right: 0;
left: 0;
fiddle: http://jsfiddle.net/a8LXV/

Always-on-top header

I want to add a always-on-top header like the new twitter does.
Explanation: When the user scrolls down the page, I want the header to stay on top of the window.
Somebody know a script that does that? Or can target me how can I do it?

You can use position: fixed; on the header.
<div id="header">
content goes here.
</div>
and the CSS:
#header { position: fixed; z-index: 9999; top: 0; left: 0; }

You need to give your header a position of fixed to make it visible throughout the page. And set the top value appropriately along with width.
Example:
#header{
position:'fixed';
top:0;
width:800px;
}

Use position:fixed on the header in its CSS.
Also, dont forget to set the left and top attributes to where you want it to go :)