重慶分公司
重慶分公司
測試1
測試2
測試3
測試4
測試5
h5之scrollIntoView怎么用？這個問題可能是我們?nèi)粘W習或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！
站在用戶的角度思考問題，與客戶深入溝通，找到倉山網(wǎng)站設計與倉山網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都做網(wǎng)站、網(wǎng)站設計、外貿(mào)營銷網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、國際域名空間、虛擬主機、企業(yè)郵箱。業(yè)務覆蓋倉山地區(qū)。
如果滾動頁面也是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
scrollIntoView(ture)元素上邊框與視窗頂部齊平scrollIntoView(false)元素下邊框與視窗底部齊平
#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;
} 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);
};
}scroll
頁面結(jié)構
測試1測試2測試3測試4測試5
.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 () {//為頁面添加頁面滾動監(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()});
});全部代碼
h6之scrollIntoView控制頁面元素滾動 scrollIntoView
scrollIntoView(ture)元素上邊框與視窗頂部齊平scrollIntoView(false)元素下邊框與視窗底部齊平scroll
頁面結(jié)構
測試1測試2測試3測試4測試5
感謝各位的閱讀！看完上述內(nèi)容，你們對h5之scrollIntoView怎么用大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關文章內(nèi)容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
