Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

iOSとそれ以外のOSのブラウザでスクロールイベントを取得する方法

More than 1 year has passed since last update.

はじめに

手持ちのiOSでのスクロールイベントの取得で詰まったりしたので備忘録。

スクロール量の取得

以下の4つのどれかを参照する事でスクロール量を取得可能である。

  • document.documentElement.scrollTop
  • document.body.scrollTop
  • window.pageYOffset
  • window.scrollY

document.documentElement.scrollTopdocument.body.scrollTopはどちらか片方しか定義されていないブラウザが多いので、参照するなら以下のようにすべきだろう。

document.documentElement.scrollTop || document.body.scrollTop

参考:各ブラウザにおけるスクロール量の値

Macの各ブラウザのコンソールから以下のイベントを生やしてログを見た。

window.addEventListener("scroll", function () {
  console.log(document.documentElement.scrollTop + "," + document.body.scrollTop + "," + window.pageYOffset + "," + window.scrollY);
}, false);

結果

ブラウザ document.documentElement.scrollTop document.body.scrollTop window.pageYOffset window.scrollY
Chrome 120 0 120 120
Firefox 120 0 119.80000305175781 119.80000305175781
Safari 120 0 120 120
Opera 120 0 120 120

PCとAndroidにおけるスクロールイベントの取得

PCやAndroidでは以下のようにaddEventListenerのscrollイベントでスクロールの座標を取得できる。

window.addEventListener("scroll", function () {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
}, false);

iOSにおけるスクロールイベントの取得

iOSではscrollイベントが発火されない。
なのでsetTimeoutを使って随時window.pageYOffsetを取得し、スクロールイベントを検知する。

setTimeout(function () {
  var scrollTop = window.pageYOffset;
}, 10);

上のコードでは指を離した後の慣性スクロールも検知可能。
setTimeoutのディレイミリ秒数は状況に応じて自由に変更してください。

参考:touchmoveとtouchendは使えないのか?

touchmovetouchendを用いる事で以下のように指によるスクロールイベントを検知可能である。

function scrollChange () {
  var scrollTop = window.pageYOffset;
}
window.addEventListener("touchmove", scrollChange, false);
window.addEventListener("touchend", scrollChange, false);

しかし、上のコードは実際には使い物にならないだろう。
理由は指を離した後の慣性スクロールを一切検知できないからである。

どのOSでもスクロールイベントの取得する方法

onscrollイベントハンドラーを使えばOSに関わらずスクロールイベントを取得可能。
ただし、addEventListenerと違って複数ハンドリングできず、他のjsに関数を書き換えられる可能性すらあることに注意。

window.onscroll = function () {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
}
TD12734
Unity/C#を用いて東方二次創作ゲームの制作を行っています。
https://twitter.com/TD12734
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away