【CSS】pointer-eventsプロパティと活用事例

CSS グーグルマップスクロール

はじめに

本記事はCSSのpointer-eventsプロパティとその活用事例をご紹介します。
「pointer-events」とはHTML要素に対するクリックイベントを制御することができるプロパティです。

今回の記事ではその活用事例の１つとして、グーグルマップのスクロールイベントをクリックした時だけ発動する方法をご紹介します。

今回使用する例は以下言語を使用しています：

HTML
CSS
JQuery

ページ内に埋め込んだグーグルマップのスクロール

アクセスページなどにグーグルマップを埋め込むことはよくありますが、その時に注意しないといけないことの１つがグーグルマップのスクロールです。
そのまま埋め込んでしまうと、グーグルマップがある部分までは普通にスクロールし、グーグルマップに差し掛かった時点でスクロールが「拡大」として判定され、地図がどんどん拡大してしまいます。

サンプル動画

スクロールについて

以前は「ユーザーはスクロールしない」ので、スクロールしなくとも見える「ファーストビュー」にコンテンツを詰め込むことが推奨されていましたが、すでにいくつかの調査によりユーザーがページ内でスクロールする確率や範囲が広がっていることがわかっています。

例えば、データアナリティクスを専門とするCharbeatはユーザーがWebサイトのエンゲージメントの６5.7%はファーストビュー以外で起こっていると発表しています。

また、ページを解析するためのヒートマップツールを提供しているClickTale も120,000ページのWeb サイトを解析した調査結果を発表しました。その調査によると、スクロールできるページのうち76%に何らかのスクロールアクションがあり、22%がページの最後までスクロールされています。

つまり、平均的なサイトは訪問するユーザーの5人に1人がページの最後までスクロールしていることがわかります。

Google Mapでのスクロールの役割

ユーザーがよく使う「スクロール」アクション。何も対処をしないと、グーグルマップに差し掛かった際に地図がどんどん拡大するイライラページが出来上がってしまいます。

とはいえ、「地図を拡大してもっと詳しく道を見たい！」というユーザーや、「もう少し地図を縮小して周りの建物などを見たい！」というユーザーもいるでしょう。

両方に対処するため、今回のコードでは以下3点の機能を盛り込みます。

1. ユーザーがスクロールした時に地図を拡大しない
2. ユーザーがクリックしたあとはスクロールすると地図が拡大する
3. ユーザーが地図の外にマウスカーソルを出したら、またクリックするまでスクロールしても地図を拡大させない

CSSの「pointer-events」とクリックイベントに及ぼす影響

今回のコードではCSSの「pointer-events」というものを使用します。

「pointer-events」とはHTML要素に対するクリックイベントを制御することができるプロパティです。

pointer-eventsプロパティでよく使用する値は２つです。autoとnoneです。
デフォルトでは、pointer-events: auto;になっています。
pointer-events: none;に指定を変更するとクリックができなくなります。それに加え、マウスカーソルの形がデフォルトのままになります。さらに、CSSのhoverやactiveなどの状態やJavaScriptのクリックイベントも作動しなくなります。
CSSで指定するものなのですが、JavaScriptのような働きをしてくれます。

例えば、.disableや.inactiveのものに対してpointer-events: none; を設定することによって、
<a>タグで囲んだものでも、マウスカーソルに反応しないようにすることができます。

今回は、ページが読み込まれた時にpointer-event: none;を設定、地図をクリックしたらpointer-event: auto;に変更、最後にマウスが地図を外れたら再度pointer-event: none;を設定します。

まずは、HTMLのコードですが、下記のようにしておきます。

HTML:

<div class="map_container">
        <iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.916874893872!2d139.7034340652587!3d35.67904873019479!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cb8b8fae637%3A0xe30dbf6efc70fcc0!2zSmFwYW4sIOOAkjE1MS0wMDUxIFTFjWt5xY0tdG8sIFNoaWJ1eWEta3UsIFNlbmRhZ2F5YSwgNCBDaG9tZeKIkjjiiJI2LCDjgrfjg6vjg5Djg7zjg5Pjg6s!5e0!3m2!1sen!2s!4v1493277018469" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
      </div>

ポイントとしては、マップを表示する<iframe>以外にもう一つ<div>を使用して<iframe>を囲むことです。

CSS：

#map{
    pointer-events: none;
}

JQuery：

$(function(){
    var googleMap = $('#map');
    $('.map_container').click(function() {
        googleMap.css('pointer-events', 'auto'); //地図をクリックしたら`pointer-event: auto;`に変更
    });
    googleMap.mouseleave(function() {
        googleMap.css('pointer-events', 'none'); //マウスが地図を外れたら再度`pointer-event: none;`を設定
    })
});