1

我有以下带有 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没有。下面是控制台输出。

0
0
0
1750

找了半个小时还是不知道怎么解决

更新：.container #markers关于和的CSS#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; }
4

2 回答 2

0

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

于 2012-12-08T11:02:45.973 回答
0

检查此代码，您也可以在此处查看实时示例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);​
于 2012-12-08T11:44:37.740 回答