[解決済み】div内の要素にスクロールする方法は?
2022-04-02 10:16:27
質問
私は、スクロールされた
div
をクリックすると、強制的にこのようなイベントが発生するようにしたいのです。
div
をクリックすると、スクロールして中の要素を見ることができます。
そのJavasScriptをこんな風に書いてみた。
document.getElementById(chr).scrollIntoView(true);
をスクロールさせながら、全ページをスクロールさせることができます。
div
そのものです。
それをどう解決するか?
こう言いたいのです。
MyContainerDiv.getElementById(chr).scrollIntoView(true);
解決するには?
スクロールして表示させたい要素の、親要素 (スクロールする div コンテナ) からの相対的な上端オフセットを取得する必要があります。
var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;
変数 topPos には、スクロールする div の最上部と表示したい要素との間の距離 (ピクセル単位) が設定されました。
では、その位置までdivがスクロールするように
scrollTop
:
document.getElementById('scrolling_div').scrollTop = topPos;
プロトタイプJSフレームワークを使用している場合は、このように同じことをします。
var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];
ここでも、見たい要素が一番上に来るように (それが不可能な場合は、できるだけ下にスクロールして見えるように) div をスクロールさせます。
関連
-
[解決済み】コンソールがUnterminated JSX contentsエラーを投げる【終了しました
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] JavaScriptでページの一番上までスクロールする?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】JavaScriptで':'(コロン)は何をするのか?
-
[解決済み】Angular JS Uncaught Error。[インジェクター:モジュラー]。
-
[解決済み】jquery $.ajaxオブジェクトのresponseJSONプロパティを取得する方法 [重複]。
-
[解決済み】最大呼び出しスタックサイズ超過エラーとその修正方法とは?
-
[解決済み】SyntaxError: 'import' と 'export' は 'sourceType: module' とだけ表示されるかもしれない - Gulp
-
[解決済み】エラー:リスン EACCES 0.0.0.0:80 OSx Node.js
-
[解決済み】 Uncaught Error: Invariant Violation: 解決済み】 Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object.
-
[解決済み】DOMException: サポートされているソースが見つからなかったため、読み込みに失敗しました。
-
[解決済み】ES6マップオブジェクトをソートすることは可能ですか?
-
[解決済み] [Solved] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングする