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

私は30分探していましたが、まだ修正方法がわかりません...

更新:.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

このコードを確認してください。また、ここで実際の例を確認することもできます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 に答える
0

position: absolute;いくつかの試行の後、追加することでなんとか修正できました.container

于 2012-12-08T11:02:45.973 に答える