【JavaScript】画面スクロールをトリガーにしたイベント

2018年3月7日2019年6月12日JavaScript,イベント

スクロールをトリガーにしたJavaScriptイベントの実装

JavaScript：スクロールをトリガーにしたイベントの動作サンプル

サンプルではwindowのaddEventListenerにトリガーイベントscrollを定義して実行しています

See the Pen JavaScript Scroll ivent by yochans (@yochans) on CodePen.

JavaScript：スクロールをトリガーにしたイベントのサンプルコード

HTML

<div id="container"></div>
<div id="log">scrollTop:0</div>

CSS

#container{
  height:1200px;
}

#log{
  width:130px;
  background:#01579B;
  position: fixed;
  top:60px;
  left:10px;
  color:#FFF;
  padding:10px;
  
}

JavaScript

const log = document.getElementById('log');

//スクロールをトリガーにしたイベント
window.addEventListener('scroll', () => {
  
  //高さを取得して表示
  let scrollTop = document.scrollingElement.scrollTop;
　log.textContent = `scrollTop:${scrollTop}`;
  
}, false);

jQUery：スクロールをトリガーにしたイベントの動作サンプル

See the Pen JavaScript Scroll ivent（jQuery） by yochans (@yochans) on CodePen.

jQUery：スクロールをトリガーにしたイベントのサンプルコード

jQuery

//スクロールをトリガーにしたイベント
window.addEventListener('scroll', () => {
  
  //高さを取得して表示
  let scrollTop = $(window).scrollTop();
　$('#log').text(`scrollTop:${scrollTop}`);
  
}, false);