[ Scroll y but fixed to x - buggy in ios ]

I am using some javascript to keep one of my divs fixed when scrolling horizontally but to scroll along with the content when scrolling vertically.

The only problem I am having is that when I view it on ipad, I scroll to the right and left and the div disappears until the scroll action has stopped and then returns in the right position once you have stopped scrolling.

Is there a way to fix this on the ipad?

Here is the code I am using.

CSS:

#header {
top: 15px;
left: 15px;
position: absolute;
width: 100px;
height: 100px;
}

#longDiv {
margin: 100px 0 0 0;
width: 140%;
height: 4000px;
border: 1px #000 solid;
background:grey;
}

HTML:

<div id="header">
Haha, I am a header. Nah.. Nah na na na
</div>
<div id="longDiv">
I am a bit of buffer test
</div>

SCRIPT:

$(window).scroll(function(){
$('#header').css({
    'left': $(this).scrollLeft() + 15 //Why this 15, because in the CSS, we have set     
left 15, so as we scroll, we would want this to remain at 15px left
});
});

Here is the jsfiddle http://jsfiddle.net/susannalarsen/05b9Lnng/1/

Answer 1

---

It seems what you are trying to achieve could be done with CSS, there's no need for JS.

Why not do something like this:

HTML

<div id="header">
    Header here 
</div>
<div id="scrollDivWrapper">
    <div id="scrollDiv">
        <p>This internal wrapper div has a wider width than it's parent div.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed nibh nibh, ut volutpat turpis. Aliquam at nunc nisl. Curabitur sit amet lectus eget ligula interdum molestie. Vestibulum ultricies tortor eleifend mi luctus lacinia.</p> 
    </div>
</div>

CSS

#header {
    width: 100%;
    height: 100px;
}

#scrollDivWrapper {
    width: 100%;
    height: 300px;
    overflow-x:scroll;
}
#scrollDiv {
    width:150%;
}

The end result would be a side-scrolling div that also scrolls vertically with all the other content on the page. No need for JS to maneuver other elements!

Just be sure that your target devices can handle overflow-x. It didn't start with great device support as it was one of several CSS properties that allowed device users to get 'trapped' within an inescapable div.

Here's the Fiddle