溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

h5之scrollIntoView怎么用

發(fā)布時間：2020-10-13 16:23:33 來源：億速云 閱讀：206 作者：小新 欄目：web開發(fā)

h5之scrollIntoView怎么用？這個問題可能是我們?nèi)粘W習或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

如果滾動頁面也是DOM沒有解決的一個問題。為了解決這個問題，瀏覽器實現(xiàn)了一下方法，以方便開發(fā)人員如何更好的控制頁面的滾動。在各種專有方法中，HTML5選擇了scrollIntoView()作為標準方法。scrollIntoView()可以在所有的HTML元素上調(diào)用，通過滾動瀏覽器窗口或某個容器元素，調(diào)用元素就可以出現(xiàn)在視窗中。如果給該方法傳入true作為參數(shù)，或者不傳入任何參數(shù)，那么窗口滾動之后會讓調(diào)動元素頂部和視窗頂部盡可能齊平。如果傳入false作為參數(shù)，調(diào)用元素會盡可能全部出現(xiàn)在視口中（可能的話，調(diào)用元素的底部會與視口的頂部齊平。）不過頂部不一定齊平.

一、scrollIntoView

html

<div><h3>scrollIntoView</h3><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);
        };
    }

二、滾動監(jiān)聽

html

<div><h3>scroll</h3><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>頁面結(jié)構(gòu)</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 () {//為頁面添加頁面滾動監(jiān)聽事件var wst = $(window).scrollTop(); //滾動條距離頂端值for (var i = 1; i < 6; i++) {             //加循環(huán)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);//h6 scrollIntoView()});
    });

全部代碼

<!DOCTYPE html><html><head><meta charset="utf-8"><title>h6之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><h3>scrollIntoView</h3><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><h3>scroll</h3><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>頁面結(jié)構(gòu)</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沒有解決的一個問題。為了解決這個問題，瀏覽器實現(xiàn)了一下方法，以方便開發(fā)人員如何更好的控制頁面的滾動。
         在各種專有方法中，HTML5選擇了scrollIntoView()作為標準方法。scrollIntoView()可以在所有的HTML元素上調(diào)用，
         通過滾動瀏覽器窗口或某個容器元素，調(diào)用元素就可以出現(xiàn)在視窗中。如果給該方法傳入true作為參數(shù)，或者不傳入任何參數(shù)，
         那么窗口滾動之后會讓調(diào)動元素頂部和視窗頂部盡可能齊平。如果傳入false作為參數(shù)，調(diào)用元素會盡可能全部出現(xiàn)在視口中（可能的話，調(diào)用元素的底部會與視口的頂部齊平。）不過頂部不一定齊平.         */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 () {//為頁面添加頁面滾動監(jiān)聽事件var wst = $(window).scrollTop(); //滾動條距離頂端值for (var i = 1; i < 6; i++) {             //加循環(huán)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);//h6 scrollIntoView()});
    });</script></body></html>

感謝各位的閱讀！看完上述內(nèi)容，你們對h5之scrollIntoView怎么用大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手