Scrolling the content of an HTML element, rather than the whole window object

Question

I have the following two in my hands:

#elementA {
    position: absolute;
    width: 200%;
    height: 100%;
    background: linear-gradient(to right, rgba(100,0,0,0.3), rgba(0,0,250,0.3));
    z-index: 250;
}

#containerofA {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 240;
    padding-bottom: 100px;  // to hide the horizontal scrollbar
    overflow-x: scroll;
}

The elementA as a div appears inside the containerofA as a div again. elementA has twice the width as its container, and is to be scrolled with a touch-capable device.

These things already happen. What I'm after is to have the elementA to be initially scrolled to middle. I want it to be either positioned at -50% initially, or to be scrolled towards right by 50% upon loading.

In JavaScript, CSS or HTML: How to do that?

window.scroll(offset-x, offset-y); and variations scroll the whole window, if they can. It should really be an easy thing to do, but I cannot see how...

Answer 1

Use scrollLeft property of dom elements.

http://jsfiddle.net/hCN7n/

document.getElementById('containerofA').scrollLeft = 250;

Answer 2

Try something like this:

 $(window).load(function() {
    $(element).scrollLeft(offset-left);
});

Answer 3

Why not do it like:

.Container{
position:fixed;
width:100%;
height:100%;
overflow-x:scroll;
overflow-y:hidden;
}

.Elementcontained{
position:absolute;
margin:auto;
left:0;right:0;bottom:0;top:0;
width:200%;
height:100%;
}

That should probably work?

Answer 4

You can use the scrollTop and scrollLeft properties.