Яндекс карты скролл мышкой

Яндекс карты скролл мышкой

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 583b058088a5d8b5 • Your IP : 5.45.65.94 • Performance & security by Cloudflare

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

Читайте также:  Восстановление загрузки windows 10 с флешки

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

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

❶ Первым делом давайте оформим наш тег внутрь другого

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

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

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

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

Подписывайтесь на группу в ВКонтакте, вступайте в сообщество на Facebook, чтобы всегда быть в курсе актуальных выпусков
W e b d e v e l o p m e n t b l o g !

На российских сайтах в разделе контактов или просто в подвале сайта обычно висит карта проезда, собранная на конструкторе карт от Яндекса. Зачастую такая карта растянута на всю ширину страницы, что приводит к багу при просмотре — когда мы скроллим такую страницу колесом мыши, то при попадании курсора на карту начинает скроллиться уже содержимое карты, а не сайта.

Чтобы избежать такой ситуации нужно при встраивании виджета карты из конструктора отключить прокрутку, убрав указание GET-параметра scroll=true из URL.

Ссылка на основную публикацию
Adblock detector