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...
Use scrollLeft property of dom elements.
document.getElementById('containerofA').scrollLeft = 250;
Try something like this:
$(window).load(function() {
$(element).scrollLeft(offset-left);
});
您可以使用scrollTop和scrollLeft属性。
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?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.