JSで横スクロールeventを検知するメモ
JSで横スクロールeventを検知するメモ
デフォのscrollやtouchmove eventでは縦スクロール・横スクロールの区別ができない． なので，Custom Eventを使って横スクロールのみのeventを作成してそれを検知する処理についてのメモ．
動作確認した環境
sample code
仕組み
- custom event
scroll-xを作成 - 指定要素の
scrolleventを検知- 前の
scrollLeftと今のscrollLeft値を比較 - 変化していれば，custom event
scroll-xをdispatch(発行)
- 前の
scroll-xevent をevent listener で拾って処理code
実行テスト
codepen:
See the Pen sample custom event scroll-x by Cartman (@Cartman0) on CodePen.
拡張性
scrollLeftの部分をscrollTopにすれば縦スクロールeventの取得をできるscrollLeft値をthresholdを設定するとeventのdispatch間隔を制御できる．
