Игнорируем скролл в <iframe> Яндекс.Карт и Google Maps

Установили Яндекс.Карты на свой сайт? Использовали самую простую вставку - через iframe? При попадании мыши в данный фрейм (и при прокрутке с телефона) экран не будет прокручиваться как Вам хотелось бы. А будет меняться локация на карте. Яндекс уверяет, что исправить это невозможно, и рекомендует использовать JS API, что более сложно и не всегда целесообразно. Вот ответ из Яндекс.Блога от сотрудника Яндекса: "поведения Виджета Карт в iframe настраивать нельзя". Кстати, при использовании JS API в мобильной версии скролл карты всё равно остаётся, даже несмотря на рекомендуемый параметр scroll=false, который нужно использовать в параметре запроса, ведь по факту данный параметр отключает масштабирование колесом мыши, а у мобильных нет мыши и для них нужно использовать API и отключать поведение multiTouch.

В итоге, поняв масштаб данной проблемы, я написал несложный скрипт, с помощью которого Вы сможете не бояться за прокрутку внутри iframe, ни в мобильной, ни в десктопной версии Вашего сайта. Скрипт подходит как для Яндекс.Карт, так и для Google Maps.

Итак, как запретить скролл в <iframe> Яндекс.Карт и у Google Maps аналогично

❶Первым делом давайте оформим наш тег <iframe> внутрь другого <div> с идентификатором wrapMap:

<div id="wrapMap">
    <iframe style="pointer-events: none;" src="ваш_src" width="100%" height="450" frameborder="0"></iframe>
</div>

В элемент <iframe> мы добавили инлайновый стиль с отключением кликов и прокрутки по карте (с помощью "pointer-events: none"). В данном случае это не является дурным тоном и необходимо для дальнейшей работы скрипта.

❷Затем давайте настроим активацию карты по клику на неё. Кстати, для удобства пользователей, давайте создадим интерактивную подсказку об этом и функционал для активации:

<script>
    // создаём элемент <div>, который будем перемещать вместе с указателем мыши пользователя
    var mapTitle = document.createElement('div'); mapTitle.className = 'mapTitle';
    // вписываем нужный нам текст внутрь элемента
    mapTitle.textContent = 'Для активации карты нажмите по ней';
    // добавляем элемент с подсказкой последним элементов внутрь нашего <div> с id wrapMap
    wrapMap.appendChild(mapTitle);
    // по клику на карту
    wrapMap.onclick = function() {
        // убираем атрибут "style", в котором прописано свойство "pointer-events"
        this.children[0].removeAttribute('style');
        // удаляем элемент с интерактивной подсказкой
        mapTitle.parentElement.removeChild(mapTitle);
    }
    // по движению мыши в области карты
    wrapMap.onmousemove = function(event) {
        // показываем подсказку
        mapTitle.style.display = 'block';
        // двигаем подсказку по области карты вместе с мышкой пользователя
        if(event.offsetY > 10) mapTitle.style.top = event.offsetY + 20 + 'px';
        if(event.offsetX > 10) mapTitle.style.left = event.offsetX + 20 + 'px';
    }
    // при уходе указателя мыши с области карты
    wrapMap.onmouseleave = function() {
        // прячем подсказку
        mapTitle.style.display = 'none';
    }
</script>

❸Добавим немного стилей для обёртки карты и интерактивного элемента подсказки:

<style>
#wrapMap {
    position: relative;
    cursor: help;
    overflow: hidden;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(204, 204, 204);
    border-image: initial;
}
.mapTitle {
    position: absolute;
    z-index: 1000;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px;
    display: none;
    padding: 5px 20px;
    border-radius: 5px;
    background: rgb(255, 255, 255);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(204, 204, 204);
    border-image: initial;
}
</style>

Пример работы скрипта:

Приятного использования!