システム Edit : 2018.07.19 Update : 2024.11.07

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

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

Contents

PCでの対処法
SPでの対処法

PCでの対処法

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

iframe {
  pointer-events: none;
}

iframe {

pointer-events: none;

}

SPでの対処法

PCでつけていたpointer-eventsを初期値のautoにして解除します。

iframe {
  pointer-events: auto;
}

iframe {

pointer-events: auto;

}

-webkit-overflow-scrollingでscroll可能にします。また、どうしてもiframeをスクロールさせつつリンクさせたい箇所があったので無理やり.coverで囲み、リンクを飛ばす仕様にしました。
HTML

<div class="cover">
<iframe>~</iframe>
</div>

</div>

CSS

.cover {
  z-index: 1;
  position: fixed;
  width: 100%;
  height: auto;
  background-color: transparent;
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  display:inline-block;
}
.cover iframe {
  overflow: scroll;
  -webkit-overflow-scrolling: touch
  -webkit-transform: translateZ(0px);
}

.cover {

z-index: 1;

position: fixed;

width: 100%;

height: auto;

background-color: transparent;

-webkit-overflow-scrolling: touch;

overflow: auto;

display:inline-block;

}

.cover iframe {

overflow: scroll;

-webkit-overflow-scrolling: touch

-webkit-transform: translateZ(0px);

}

また、fullpage.jsで作られたページは、section内のコンテンツしか表示されません。(※fixedは別) ひゅんひゅんページが送られる動きは心地よくユーザの離脱率などが軽減されると思いますので、伝えたい情報が一箇所に集約でき、そこまで他の要素が必要ではないサイト(例:採用サイトなど)に向いていると感じました🙌