jsでpull to refreshを実装する

WEB制作
jsでpull to refreshを実装する

Twitterなどで採用されているスマホを下に引っ張ったときに更新する機能「pull to refresh」をjsを使って実装する方法です。

目次

実装例

let _startY;
const inbox = document.querySelector(‘#inbox’);
let _startY;
const inbox = document.querySelector('#inbox');

inbox.addEventListener('touchstart', e => {
  _startY = e.touches[0].pageY;
}, {passive: true});

inbox.addEventListener('touchmove', e => {
  const y = e.touches[0].pageY;
  // Activate custom pull-to-refresh effects when at the top of the container
  // and user is scrolling up.
  if (document.scrollingElement.scrollTop === 0 && y > _startY &&
      !document.body.classList.contains('refreshing')) {
    // refresh inbox.
  }
}, {passive: true});

実装方法は、いたって簡単です。 まず、タッチ開始座標を保存して、一定以上下に移動したときに、コンテンツ部分が一番までスクロールされていれば、リロードなどを行えばいいのです。

参考サイト