MENU
CLOSE
STUDYSYSTEMWEBSITE Edit : 2018.07.19 Update : 2023.09.06

fullPage.jsでiframe要素をスクロールさせる方法

最近ねてもねても、眠い状態が続いております。 ぼーっとしながら頭の中ではあれこれ考えたりしているけれど、スマホをいじっていると脳の考える部分が機能していないような感覚になり、情報が大量に入ってくると逆に人間の思考は停止しはじめるのかな、と思いました。 インプットだけじゃなく、アウトプットが大切なのですね(いまさら) そんなこんなで、ラボのほうも地道に更新していこうと思います🐱   先日、fullpage.jsを用いたサイトをつくったのですが、iframe要素の上でこぞってスクロールできなくなり苦戦したので、その対処方をメモしておきたいと思います。

PCでの対処法

SVGでよく使用する、pointer-eventsをiframeにあてます。これでiframeがクリックなどはできなくなるのですが、スクロールは可能になります。  

SPでの対処法

PCでつけていたpointer-eventsを初期値のautoにして解除します。 -webkit-overflow-scrollingでscroll可能にします。 また、どうしてもiframeをスクロールさせつつリンクさせたい箇所があったので無理やり.coverで囲み、リンクを飛ばす仕様にしました。  
HTML CSS   また、fullpage.jsで作られたページは、section内のコンテンツしか表示されません。(※fixedは別) ひゅんひゅんページが送られる動きは心地よくユーザの離脱率などが軽減されると思いますので、伝えたい情報が一箇所に集約でき、そこまで他の要素が必要ではないサイト(例:採用サイトなど)に向いていると感じました🙌

Miki Kohinata

就活時代、企業で働きたくないがゆえに将来独立することを決めエンジニアの道へ。IT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。