Explication détaillée de l'utilisation de scrollIntoView dans h5-Tutoriel H5-php.cn

Explication détaillée de l'utilisation de scrollIntoView dans h5

零下一度

Libérer： 2017-06-25 10:03:23

original

5930 Les gens l'ont consulté

Si la page défile, c'est aussi un problème que DOM n'a pas résolu. Afin de résoudre ce problème, les navigateurs ont mis en place une méthode permettant aux développeurs de mieux contrôler le défilement de la page. Parmi diverses méthodes propriétaires, HTML5 a choisi scrollIntoView() comme méthode standard. scrollIntoView() peut être appelé sur tous les éléments HTML En faisant défiler la fenêtre du navigateur ou un élément conteneur, l'élément appelant peut apparaître dans la fenêtre. Si true est passé en paramètre à cette méthode, ou si aucun paramètre n'est transmis, alors le haut de l'élément ajusté et le haut de la fenêtre seront aussi alignés que possible après le défilement de la fenêtre. Si false est passé en paramètre, l'élément appelant apparaîtra dans la fenêtre aussi complètement que possible (si possible, le bas de l'élément appelant affleurera le haut de la fenêtre.) Cependant, le haut n'est pas nécessairement aligné. .

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>

Copier après la connexion

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;
        }

Copier après la connexion

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);
        };
    }

Copier après la connexion

2. Surveillance du défilement

html

<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>

Copier après la connexion

css

      .main div {height: 1000px;width: 300px;margin: 20px;background-color: #C0C0C0;
        }#nav {position: fixed;width: 100px;height: 200px;top: 40%;right: 10px;
        }#nav div {cursor: pointer;text-align: center;

        }

Copier après la connexion

js

    $(function () {
        $(window).scroll(function () {//为页面添加页面滚动监听事件var wst = $(window).scrollTop(); //滚动条距离顶端值for (var i = 1; i < 6; i++) {             //加循环if ($("#f" + i).offset().top <= wst + 10) { //判断滚动条位置$(&#39;#nav div&#39;).css("background-color", "white");
                    $(".f" + i).css("background-color", "red");
                }
            }
        });
        $(&#39;#nav div&#39;).click(function () {
            $(&#39;html,body&#39;).animate({scrollTop: $("#" + this.className).offset().top}, 500);//          $("#" + this.className)[0].scrollIntoView(true);//h5 scrollIntoView()});
    });

Copier après la connexion

Tous les codes

h5之scrollIntoView控制页面元素滚动<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><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><script>window.onload = function () {/* 如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题，浏览器实现了一下方法，以方便开发人员如何更好的控制页面的滚动。
         在各种专有方法中，HTML5选择了scrollIntoView()作为标准方法。scrollIntoView()可以在所有的HTML元素上调用，
         通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，
         那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部不一定齐平.         */document.querySelector("#roll1").onclick = function () {
            document.querySelector("#roll_top").scrollIntoView(false);
        };
        document.querySelector("#roll2").onclick = function () {
            document.querySelector("#roll_top").scrollIntoView(true);
        };
    }</script><script>$(function () {
        $(window).scroll(function () {//为页面添加页面滚动监听事件var wst = $(window).scrollTop(); //滚动条距离顶端值for (var i = 1; i < 6; i++) {             //加循环if ($("#f" + i).offset().top <= wst + 10) { //判断滚动条位置                    $('#nav div').css("background-color", "white");
                    $(".f" + i).css("background-color", "red");
                }
            }
        });
        $('#nav div').click(function () {
            $('html,body').animate({scrollTop: $("#" + this.className).offset().top}, 500);//          $("#" + this.className)[0].scrollIntoView(true);//h5 scrollIntoView()});
    });</script>

Copier après la connexion

Afficher le code

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!