h5之scrollIntoView用法详解

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

二、滚动监听

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>
    

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

js

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

全部代码

!DOCTYPE html>
    html>
    head>
    meta charset="utf-8">
    title>
    h5之scrollIntoView控制页面元素滚动/title>
    style>
/*scrollIntoView*/#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;
}
/*scroll*/.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;
}
    /style>
    /head>
    body>
    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 src="http://apps.bdimg.COM/libs/jquery/2.1.1/jquery.min.js?1.1.11">
    /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>
    /body>
    /html>
    

以上就是h5之scrollIntoView用法详解的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！