Question

我有以下带有CSS .container { overflow: scroll; }等的HTML。

<body>
<div class="container">
  <div id="markers"></div>
  <img id="map" src="/img/map.jpg"/>
</div>
</body>

map.jpg非常大，我想滚动到这样的固定位置：

$(function(){
  console.log($('.container').scrollTop());
  $('.container').scrollTop(1000);
  console.log($('.container').scrollTop());
  console.log($('.container').scrollLeft());
  $('.container').scrollLeft(1750);
  console.log($('.container').scrollLeft());
});

scrollLeft工作正常但scrollTop没有。下面是控制台输出。

我一直在寻找半小时，但仍然不知道如何解决它......

更新：关于.container #markers和#map

的CSS

.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; }

Answer 1

经过几次试验后，我设法通过将position: absolute;添加到.container

来解决此问题

Answer 2

检查此代码，您也可以在此处查看实时示例http://jsfiddle.net/sarfarazdesigner/2uvRe/

这是html代码

<div class="demo">
    <h1>lalala</h1>
    <p>Hello</p>
</div>

这是css代码

div.demo {
background:#CCCCCC none repeat scroll 0 0;
border:3px solid #666666;
margin:5px;
padding:5px;
position:relative;
width:200px;
height:100px;
overflow:auto;
}
p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }

这是javascript代码

$("div.demo").scrollTop(300);
    $("div.demo").scrollLeft(300);

scrollLeft有效，但scrollTop不起作用

2 个答案: