scrollIntoView制御ページ要素スクロール
ページをスクロールしてもDOMでは解決できない問題です.この問題を解決するために、ブラウザは開発者がページのスクロールをよりよく制御する方法を実現しました.様々な独自の方法の中で、HTML 5は標準的な方法としてscrollIntoView()を選択した.scrollIntoView()は、すべてのHTML要素で呼び出すことができ、ブラウザウィンドウまたはコンテナ要素をスクロールすることで、呼び出し要素がウィンドウに表示されます.このメソッドにtrueをパラメータとして入力するか、パラメータを入力しない場合は、ウィンドウがスクロールすると、移動要素の上部とウィンドウの上部ができるだけ平らになります.falseがパラメータとして入力されると、呼び出し要素はできるだけすべてビューポートに表示されます(可能であれば、呼び出し要素の下部はビューポートの上部と平らになります).しかし、上部は必ずしも平らではない.
html
二、スクロールリスニング
html
css
html
scrollIntoView
scrollIntoView(ture) scrollIntoView(false)
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
scroll
1
2
3
4
5
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()
});
});すべてのコード
h5 scrollIntoView
scrollIntoView
scrollIntoView(ture)
scrollIntoView(false)
scroll
1
2
3
4
5
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);
};
}
$(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()
});
});