はしくれエンジニアもどきのメモ

情報・Web系技術・Englishの勉強メモ・備忘録です。

JSで横スクロールeventを検知するメモ

JSで横スクロールeventを検知するメモ

デフォのscrollやtouchmove eventでは縦スクロール・横スクロールの区別ができない. なので,Custom Eventを使って横スクロールのみのeventを作成してそれを検知する処理についてのメモ.

動作確認した環境

sample code

仕組み

  1. custom event scroll-x を作成
  2. 指定要素のscroll eventを検知
    1. 前のscrollLeftと今のscrollLeft値を比較
    2. 変化していれば,custom event scroll-x をdispatch(発行)
  3. scroll-x event をevent listener で拾って処理

code

get scroll-x event on JS

実行テスト

codepen:

See the Pen sample custom event scroll-x by Cartman (@Cartman0) on CodePen.

拡張性

  • scrollLeftの部分をscrollTopにすれば縦スクロールeventの取得をできる
  • scrollLeft値をthresholdを設定するとeventのdispatch間隔を制御できる.