【jQuery】IE11でfullPage.jsのスクロールスナップが効かない【ハマりメモ】
2020/10/14
レイアウトが崩れていたので微調整しました。pullkawaです。
字詰めの設定に永遠に悩み続けている
悩みついでにハマりメモの更新です
フルスクリーンでスクロールするコンテンツを作りたかったとき、大変お世話になったfullPage.js。
サンプルを見ればわかる通り、縦だけでなく横のスライドも簡単に入れられることができたり
「一部だけ普通のスクロールにしたい」みたいな細かな調整も可能。
最新版はライセンスの購入が必要ですが、少し古い2系は無料で使える様です。
（私も2系を使用しました）
このfullPage.jsを使用してサイトを作っていて、IE11でスクロールスナップが効かない（普通にスクロールしてしまう）という問題が発生しました。
出たよ…IE…となりながら解決方法を探したところ、開発元のIssuesに同じような報告と解決方法があったのでメモ。
IE11 does not scroll #1727
https://github.com/alvarotrigo/fullPage.js/issues/1727
これにならって、スクロールスナップをさせたい要素である#fullpageの親にoverflow: hidden;を追加。
（#fullpageそのものに入れると表示がおかしくなります）
すると、IE11でもスクロールスナップが動作するようになりました。
なんでかはわかりません。
開発者も「なんでwrapperにoverflow:hiddenを入れる必要があるのかわからん」と言っている模様。たぶん。
一刻も早いIEの根絶を願うばかりです。それでは。