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

Moving pagination buttons in Owl Carousel

I'm trying to move the pagination buttons/dots outside of the container div and into an outside div, so that I can have them positioned as shown below:
Things I've tried:
-upgrading to Owl Carousel 2. This basically destroyed the carousel and caused some very strange problems that I couldn't fix.
-moving them with jQuery. They did move but they vanished - they could be seen in the DOM when using inspect element, but didn't actually show up on the page at all.

Try something like this (if i understand you want dots to be on top right side)
.owl-pagination {
position: absolute;
right: 0;
top: -50px;
}

Try applying position absolute in the pagination class or id and edit the top to position the pagination in your desire

Firstly, give your container position: relative. Secondly, give your dots position: absolute; top: 0; right: 0;
That's all.

CSS/HTML - Floating DIV when I scroll issue

I have what seemed like a simple issue but cant quite figure this one out. I am using bootstrap version 3 to create my base layout. I have a footer that needed to be at the bottom of the page so i made it position: absolute; bottom: 0; and worked fine if I zoom out. When the content start getting lengthy it creates the vertical scroll bar and when scrolling the DIV floats around instead of staying at the bottom.
I tried giving the container a position: relative; but dosent seem to do anything. Would anyone have any ideas?
Heres an example of my layout, if you resize the preview section to force the vertical scroll bar you will see that when you scroll the DIV floats around instead of staying in place.
https://jsfiddle.net/DTcHh/10301/

try with fixed
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
js fiddle example

non-fixed, see the below:
your problem is (from what I gather) the footer is floating dependent on the content and and you want it to stay put where you call it.
.footerElement {
// base styles all styles
display: inline-block; // add this, does as you imagine
}
"Displays an element as an inline-level block container. The inside of
this block is formatted as block-level box, and the element itself is
formatted as an inline-level box" -W3schools
scrollbar, see the below:
As for the element that has a scrollbar resolving.
.elementwithScrollbar {
// base styles all styles
overflow:hidden; // or use overflow-y:hidden; or x
}
fixed, see the below:
If you want it to be fixed; adding position: fixed; and the value coordinates should all you have to do there. (ie. position:fixed; and where you want it)
"Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page." -MDN

Using fixed only anchors it to the bottom of the screen regardless of which part of the page you are viewing. I think you want to have the footer at the bottom of the page rather than constantly sitting at the bottom of the screen.
To fix, amend your spelling mistake here:
.contrainer-fluid { <-- should be container
position: relative;
}

Fixed div disappearing on scroll left Css

I looked at many answers here on SO but none worked for me.
Below are the posts I have looked before posting this question.
jquery fixed div on scroll-down
jquery fixed div on scroll, smooth movement
jquery fixed div on scroll, bottom boundary
How to manage css left property for fixed div
fixed div position on scroll is not working in all conditions
Absolute DIV inside a relative DIV inside a fixed Div disappears on scroll
Sticking a fixed div on scrolling down
For this purpose I have created a fiddle that shows my problem :
jsfiddle demo here
My problem there is the login span disappearing on zooming (I can't see it on scroll right)
#fixedContainer
{
background-color: #ddd;
position: fixed;
width: 500px;
height: 100px;
top: 0px;
margin-left: 20px;
}
.login
{
float: right;
}
I would prefer a CSS solution but am OK with a Javascript solution too.

Add these css attributes to your #fixedContainer selector:
overflow-x: auto;
max-width: 100%;

Avoid unpleasant skipping when implementing sticky navigator in JavaScript

I'm trying to add a sticky navigator to my blog which will stay on the very top when scrolling down. Simply enough I used jQuery and .scrollTop().
$("document").ready(function($){
/* Sticky Navigation Bar */
var nav = $('nav');
$(window).scroll(function () {
if ($(this).scrollTop() > 125) {
nav.addClass("fixed-nav");
} else {
nav.removeClass("fixed-nav");
}
});
});
With fixed-nav being positioned fixed in CSS
.fixed-nav {
z-index: 9999;
position: fixed;
top: 0;
}
It works certainly (See my blog). Nevertheless I got a small but really annoying problem. When you scroll the page from top to down, you'll notice that right before the navigation bar becomes fixed, contents below it will jump upwards a little. I know the reason is fixed positioning brought the navigator out of the stream so following content jumps up to refill its position. But I don't know how to avoid this. Can anyone come up with any idea?

An easy solution would be to toggle a nav-fixed class on your body, and then add a margin-top to your #main div which matches the height of the nav whilst it was positioned statically.
.nav-fixed nav {
z-index: 9999;
position: fixed;
top: 0;
}
/* Identical to nav's height */
.nav-fixed #main {
margin-top: 40px;
}