h5でのscrollIntoViewの使い方を詳しく解説-H5 チュートリアル-php.cn

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

零下一度

リリース： 2017-06-25 10:03:23

オリジナル

5889 人が閲覧しました

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

1. scrollIntoView

html

<div><h2>scrollIntoView</h2><button id="roll1">scrollIntoView(false)</button><button id="roll2">scrollIntoView(true)</button><div><div id="myDiv"></div><div id="roll_top">scrollIntoView(ture)元素上边框与视窗顶部齐平<span id="bottom">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

りー

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>scroll</h2><div id="nav"><div class="f1">floor1</div><div class="f2">floor2</div><div class="f3">floor3</div><div class="f4">floor4</div><div class="f5">floor5</div></div><p>页面结构</p><div class="main"><div id="f1">测试1</div><div id="f2">测试2</div><div id="f3">测试3</div><div id="f4">测试4</div><div id="f5">测试5</div></div></div>

ログイン後にコピー