1. ホーム
  2. javascript

[解決済み] ScrollIntoView()でページ全体が移動してしまう件

2022-04-23 05:38:04

質問

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 呼び出しから来るものです。モバイルサファリを使用しています。

解決方法を教えてください。

を使用することができます。 scrollTop の代わりに scrollIntoView() :

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

jsFiddleです。 http://jsfiddle.net/LEqjm/

スクロールさせたい要素が複数ある場合は、スクロールさせたい要素ごとに scrollTop をベースに、それぞれ個別に offsetTop の間にある要素の これによって、あなたが抱えている問題を回避するためのきめ細かな制御が可能になるはずです。

EDIT: offsetTopは必ずしも親要素からの相対値ではなく、最初に位置決めされた祖先からの相対値です。 親要素が位置決めされていない場合(相対、絶対、固定)、2行目を次のように変更する必要があるかもしれません。

target.parentNode.scrollTop = target.offsetTop - target.parentNode.offsetTop;