h5의 scrollIntoView 사용법에 대한 자세한 설명-H5 튜토리얼-php.cn

h5의 scrollIntoView 사용법에 대한 자세한 설명

零下一度

풀어 주다： 2017-06-25 10:03:23

원래의

5897명이 탐색했습니다.

　페이지 스크롤도 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

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

로그인 후 복사

2.

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

로그인 후 복사

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;

        }

로그인 후 복사

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

로그인 후 복사

모든 코드

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>

로그인 후 복사