16

非表示の要素を表示する前にスクロールしようとしています。これは私が取り組んでいるコードです:

<div class="main">
    <div class="bg">
    </div>
</div>

.main { 
    display:none; 
    position:abolsute; 
    width:250px;height:250px; 
    overflow:scroll;
}
.bg { 
    background: blue url(http://defaulttester.com/img/bg-landing-mario.jpg); 
    width:1200px; 
    height:800px; 
}

$(".main").scrollTop($(".bg").height()/2);
$(".main").scrollLeft($(".bg").width()/2);

表示されている場合は正常に動作しますが、表示されている場合display:hiddenは単純に動作しません。これを回避して機能させる方法はありますか？

JSFiddle: http://jsfiddle.net/dpjzJ/

4

3 に答える 3

11

visibility: hidden;代わりに、または次のようなクラスを使用します。

.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

またはこれ（ボイラープレートから）：

.visuallyhidden { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

display: none;おそらくご存じのとおり、 のあるものにはページ上の場所がありません。

この件については、こちらの記事をご覧ください。

于 2013-06-11T15:24:43.260 に答える
3

あなたの目標が scrollLeft と scrollTop を 0 に設定するだけである場合 (それが私の目標だったので)、非常にハックな解決策の 1 つは、次の手順に従うことです。

  • リセットする要素への参照を取得します。
  • 要素の親への参照を取得します。
  • 親から要素を削除します。
  • 要素を親に追加します。

scrollTop と scrollLeft は、非表示であっても 0 に戻されるようになりました。

于 2014-04-30T01:50:41.613 に答える