173

ScrollIntoView() を使用して、リスト内の強調表示された項目をスクロールして表示します。下にスクロールすると、 ScrollIntoView(false) が完全に機能します。しかし、上にスクロールすると、 ScrollIntoView(true) によってページ全体が少し移動しますが、これは意図されていると思います。ScrollIntoView(true) を使用するときにページ全体の移動を回避する方法はありますか?

これが私のページの構造です -

#listOfDivs {
  position:fixed;
  top:100px;
  width: 300px;
  height: 300px;
  overflow-y: scroll;
}

<div="container">
    <div="content"> 
         <div id="listOfDivs"> 
             <div id="item1"> </div>
             <div id="item2"> </div>
             <div id="itemn"> </div>
         </div>
    </div>
</div>

listOfDivs は ajax 呼び出しから来ています。モバイルサファリを使用。

4

14 に答える 14

158

scrollTop代わりに使用できますscrollIntoView()：

var target = document.getElementById("target");
target.parentNode.scrollTop = target.offsetTop;

jsFiddle: http://jsfiddle.net/LEqjm/

スクロールしたいスクロール可能な要素が複数ある場合は、介在する要素のscrollTopに基づいて、それぞれの を個別に変更する必要があります。offsetTopこれにより、発生している問題を回避するためのきめ細かい制御が可能になります。

編集: offsetTop は必ずしも親要素に対して相対的であるとは限りません-最初に配置された祖先に対して相対的です。親要素が配置されていない場合 (相対、絶対、または固定)、2 行目を次のように変更する必要がある場合があります。

target.parentNode.scrollTop = target.offsetTop - target.parentNode.offsetTop;
于 2012-06-14T21:08:29.033 に答える
12

いろいろ試しscrollIntoViewIfNeeded()て、ブラウザでサポートされていることを確認してください。

于 2016-03-11T18:37:53.197 に答える
8

ScrollIntoView の不適切な動作を表示する方法を追加しました - http://jsfiddle.net/LEqjm/258/ [コメントのはずですが、十分な評判がありません]

$("ul").click(function() {
    var target = document.getElementById("target");
if ($('#scrollTop').attr('checked')) {
    target.parentNode.scrollTop = target.offsetTop;    
} else {
        target.scrollIntoView(!0);
}
});
于 2016-09-01T12:40:09.537 に答える
6

jQuery プラグインでscrollintoview()使いやすさが向上

デフォルトの DOM 実装の代わりに、動きをアニメートし、不要な影響を与えないプラグインを使用できます。デフォルトでそれを使用する最も簡単な方法は次のとおりです。

$("yourTargetLiSelector").scrollintoview();

とにかく、このブログ投稿にアクセスしてください。ここですべての詳細を読むことができ、最終的にはプラグインのGitHub ソース コードにたどり着きます。

このプラグインは、最も近いスクロール可能な祖先要素を自動的に検索し、選択した要素が表示されているビュー ポート内に収まるようにスクロールします。要素が既にビュー ポートにある場合、もちろん何もしません。

于 2012-06-15T07:02:50.787 に答える