Убрать полосы прокрутки iframe

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

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

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

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

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

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

Читайте также:  Этот хост неизвестен 1с line 1068

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

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

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

В фрейм загружается страница сайта. Все попытки убрать горизонтальную прокрутку (разными способами) не дают результата. Укажите, в каком направлении копать.

Заранее Благодарю за любую подсказку (помощь).

1 ответ 1

Спасибо Всем Решение найдено

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html iframe или задайте свой вопрос.

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.12.20.35703

Используя этот код

Вот как это выглядит (чат на главной странице http://www.talkjesus.com)

Как удалить горизонтальную полосу прокрутки и изменить CSS вертикальной полосы прокрутки?

Добавить атрибут scrolling="no" в iframe.

Это работает во всех браузерах. jsfiddle здесь http://jsfiddle.net/zvhysct7/1/

Добавление scroll="no" и style="overflow:hidden" в iframe не сработало, мне пришлось добавить style="overflow:hidden" в тело html-документа, загруженного в iframe.

Просто добавьте атрибуты scrolling="no" и seamless="seamless" в тег iframe. вот так: –

Используйте приведенный выше div и он не будет показывать полосу прокрутки в любом браузере.

Добавьте это в свой CSS, чтобы скрыть как полосу прокрутки

Если у кого-то возникает проблема с отключением полос прокрутки на iframe , это может быть связано с тем, что в содержимом iframe есть полосы прокрутки на элементах ниже элемента html !

Некоторые макеты устанавливают html и body на 100% высоту и используют div #wrapper с overflow: auto; (или scroll ), тем самым перемещая прокрутку в элемент #wrapper .

Читайте также:  Что значит нм в биологии

В таком случае вы ничего не сделаете, чтобы запретить показ полос прокрутки, кроме редактирования содержимого другой страницы.

Оцените статью
Добавить комментарий

Adblock detector