h5でのscrollIntoViewの使い方を詳しく解説

ページのスクロールもDOMでは解決できていない問題です。この問題を解決するために、ブラウザは開発者がページのスクロールをより適切に制御できるようにするメソッドを実装しました。さまざまな独自メソッドの中で、HTML5 は標準メソッドとしてscrollIntoView()を選択しました。 scrollIntoView() は、すべての HTML 要素で呼び出すことができます。ブラウザ ウィンドウまたはコンテナ要素をスクロールすると、呼び出し元の要素がウィンドウに表示されます。 true がパラメータとしてこのメ​​ソッドに渡されるか、パラメータが渡されない場合、ウィンドウがスクロールされた後、調整された要素の上部はウィンドウの上部とできるだけ同じ高さになります。 false がパラメータとして渡された場合、呼び出し元要素はビューポートに可能な限り完全に表示されます (可能であれば、呼び出し元要素の下部はビューポートの上部と同じ高さになります)。ただし、上部は必ずしも同じ高さであるとは限りません。 .

1. scrollIntoView

html

<div>
<h2 id="scrollIntoView">scrollIntoView</h2>
<button>scrollIntoView(false)</button><button>scrollIntoView(true)</button><div>
<div></div>
<div>scrollIntoView(ture)元素上边框与视窗顶部齐平<span>scrollIntoView(false)元素下边框与视窗底部齐平</span>
</div>
</div>
</div>

css

       #myDiv {height: 900px;background-color: gray;

        }#roll_top {height: 900px;background-color: green;color: #FFF;font-size: 50px;position: relative;
        }#bottom {position: absolute;display: block;left: 0;bottom: 0;
        }

js

html

2.

りー

css

りー

js

  window.onload = function () {
        document.querySelector("#roll1").onclick = function () {
            document.querySelector("#roll_top").scrollIntoView(false);
        };
        document.querySelector("#roll2").onclick = function () {
            document.querySelector("#roll_top").scrollIntoView(true);
        };
    }

全コード

<div>
<h2 id="scroll">scroll</h2>
<div>
<div>floor1</div>
<div>floor2</div>
<div>floor3</div>
<div>floor4</div>
<div>floor5</div>
</div>
<p>页面结构</p>
<div>
<div>测试1</div>
<div>测试2</div>
<div>测试3</div>
<div>测试4</div>
<div>测试5</div>
</div>
</div>

コードを表示

以上がh5でのscrollIntoViewの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。