[解決済み] 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;
関連
-
Vueのフォームイベントのデータバインディングの説明
-
Vueのフィルタの説明
-
[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] JavaScriptでメールアドレスを検証するのに最適な方法は何ですか?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] JavaScriptで特定の範囲のランダムな整数を生成する?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
要素ツリー制御によるvueTreeテーブル
-
jsを使った簡単な照明スイッチのコード
-
jQueryのコピーオブジェクトの説明
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】React Nativeアプリをターミナルから実行するとエラーが発生する(iOS)
-
[解決済み】React-Redux: アクションはプレーンオブジェクトでなければならない。非同期アクションにはカスタムミドルウェアを使用する
-
nodejs unhandledPromiseRejectionWarning メッセージ
-
JavaScriptのgetElementById、getElementsByTagNam、getElementsByClassNameの違いと使い方
-
jq は html ページとデータを動的に分割する。
-
[解決済み] Safari、Chrome、IE、Firefox、Operaのブラウザを検出する方法は?