taquaki-satwo
11/28/2017 - 1:36 AM

スクロール制御

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



JS-スクロール制御

A Pen by Takaaki Sato on CodePen.

License.

input#button(type='button' value='go to green')
#element1
#element2
#element3