I currently have the following elements:
#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; // used to hide the horizontal scrollbar
overflow-x: scroll;
}
The elementA is a div placed inside the containerofA which is also a div. The width of elementA is double that of its container and requires scrolling on touch-capable devices.
Current functionality achieves this setup. My goal now is to have the elementA initially scrolled to the center upon loading. I want it to either start with a positioning of -50%, or be automatically scrolled to the right by 50% when loaded.
In JavaScript, CSS, or HTML: How can this be accomplished?
Methods like
window.scroll(offset-x, offset-y);