More than 3 years have passed since last update.

スクロールイベント

jQuery

Posted at 2021-05-06

#画面のスクロール位置を取得

  $(window).scroll(function() {
  console.log($(this).scrollTop());
})

scroll()

<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

<body>
  <p>位置：<span id="position">0px</span></p>
  <div id="box">
    <div id="contents">スクロールしてください</div>
  </div>
</body>

<!--CSS-->
<style>
#box {
  overflow: scroll;
  height: 200px;
  border: 3px solid gray;
}
#contents {
  height: 1000px;
}
</style>

<!--jQuery-->
<script>
  $(window).scroll(function() {
  console.log($(this).scrollTop());
})
  $('#box').scroll(function() {
    $('#position').text($(this).scrollTop() + 'px');
  });
</script>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up