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

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

JavaScriptイベント

Posted by Yousuke.U