scrollLeft works but scrollTop doesn't work
Posted
by
Xiao Jia
on Stack Overflow
See other posts from Stack Overflow
or by Xiao Jia
Published on 2012-12-08T10:11:02Z
Indexed on
2012/12/08
11:06 UTC
Read the original article
Hit count: 247
I have the following HTML with CSS .container { overflow: scroll; } etc.
<body>
<div class="container">
<div id="markers"></div>
<img id="map" src="/img/map.jpg"/>
</div>
</body>
map.jpg is very large and I want to scroll to a fixed position like this:
$(function(){
console.log($('.container').scrollTop());
$('.container').scrollTop(1000);
console.log($('.container').scrollTop());
console.log($('.container').scrollLeft());
$('.container').scrollLeft(1750);
console.log($('.container').scrollLeft());
});
scrollLeft works fine but scrollTop doesn't. Below is the console output.
0
0
0
1750
I've been searching for half an hour but still don't know how to fix it...
UPDATE: CSS about .container #markers and #map
.container { overflow: scroll; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; }
#map { width: 5000px; max-width: 5000px; height: 2907px; max-height: 2907px; cursor: crosshair; }
#markers { position: relative; top: 0; left: 0; width: 0; height: 0; margin: 0; padding: 0; }
© Stack Overflow or respective owner
