JS-スクロール制御
@use postcss-nested;
#element {
&1,
&2,
&3 {
width: 100px;
height: 50px;
position: absolute;
}
&1 {
background: black;
top: 500px;
left: 50px;
}
&2 {
background: red;
top: 1000px;
left: 50px;
}
&3 {
background: green;
top: 1500px;
left: 50px;
}
}
// スクロール量
// IE、Firefox
console.log(document.documentElement.scrollLeft);
console.log(document.documentElement.scrollTop);
// Chrome、Safari、Opera、Edge
console.log(document.body.scrollLeft);
console.log(document.body.scrollTop);
// Firefox,、chrome、Safari、Opera、Edge、IE9以降
console.log(window.pageXOffset);
console.log(window.pageYOffset);
// スクロール量を取得する
function getScrollTop() {
if (window.pageYOffset !== undefined) {
return window.pageYOffset;
} else {
return document.documentElement.scrollTop || document.body.scrollTop;
}
}
console.log(getScrollTop());
// windowのスクロール
scrollBy(0, 100);
function smoothScroll(id, durationTime) {
const TIME_INTERVAL = 30;
const element = document.getElementById(id);
if(!element) return;
// ボーダーを入れたelement
let ey = element.getBoundingClientRect().top;
let dy = ey*TIME_INTERVAL/durationTime;
let direction = dy>0 ? 1 : -1;
const timer = setInterval(function() {
scrollBy(0,dy); ey -= dy;
if(direction*ey <= 0) clearInterval(timer);
}, TIME_INTERVAL);
}
smoothScroll('element2', 5000);
const btn = document.getElementById('button');
const greenBox = document.getElementById('element3');
btn.onclick = function() {
greenBox.scrollIntoView();
}
input#button(type='button' value='go to green')
#element1
#element2
#element3