Удаление и стилизация скроллбаров в iframe с CSS

Быстрый ответ

Для отключения полосы прокрутки в iframe используйте CSS-стиль overflow: hidden;. Вот как это выглядит на практике:

<iframe src="your-page.html" style="overflow: hidden;"></iframe>

Такой простой подход предотвращает прокрутку содержимого в iframe и скрывает полосу прокрутки.

Вопрос чистоты кода: inline CSS против внешнего CSS

Использование inline CSS действительно быстро, но оно не эффективно с точки зрения масштабирования и удобства поддержки. Более предпочтительно использовать внешний CSS-файл:

/* Отключаем прокрутку с помощью класса */
iframe.no-scroll {
  overflow: hidden;
}

Тогда можно добавить класс таким образом:

<iframe class="no-scroll" src="your-page.html"></iframe>

Теперь у вас есть стабильное и легко поддерживаемое решение для всех ваших iframe.

Работаем с динамикой: содержимое и размеры

Для динамического содержимого, меняющего размеры в iframe, может понадобиться JavaScript для корректировки:

window.addEventListener('message', function(event) {
  /* Динамическое изменение высоты */
  var iframe = document.getElementById('yourIframe');
  if (event.origin === 'http://your-page-origin.com') {
    iframe.style.height = event.data.newHeight + 'px'; /* Меняем высоту */
  }
});

Сообщения с новой высотой можно отправить "родительскому" окну через window.parent.postMessage.

Визуализация

Настройка полосы прокрутки похожа на настройку старого радио – крутим до тех пор, пока не находим идеальное положение. Прежде чем применить CSS overflow: hidden; это выглядит так:

📻🔄 Не настроено: [Содержимое📜 + Шум🌀(Полоса Прокрутки)]

После простого действия:

iframe { overflow: hidden; } /* И всего лишь один виток... */

Мы получаем:

📻✨ Настроено: [Чистое Содержимое📜]

Не существует помех (полоса прокрутки), остается только ясный контент, который вы хотели показать.

Подробнее об этом расскажет наш спикер на видео

Прощай, проблемы с кросс-доменным содержанием

Когда iframe загружает контент с другого домена, контролировать его стили не получится из-за политики "одно источника". Стили на стороне другого сайта должны быть следующими:

body {
  overflow: hidden; /* Убираем прокрутку на источнике */
}

Это правило следует добавить в CSS содержимого iframe.

От устаревших методов к новым технологиям CSS

Использование параметра scrolling="no" сегодня устарело, как и атрибут seamless из HTML5, не поддерживаемый большинством браузеров.

Нюансы стилизации

Чтобы скрыть только горизонтальную прокрутку, используйте overflow-x: hidden;, сохраняя overflow-y: scroll; для вертикальной. Это полезно для вертикального отображения контента:

iframe {
  overflow-y: scroll; /* Вертикальная прокрутка разрешена */
  overflow-x: hidden; /* Горизонтальная прокрутка скрыта */
}

Помните о рекомендации устанавливать размеры, указывая width и height, чтобы сохранить стиль вашего дизайна.

Полезные материалы

1. Как скрыть полосы прокрутки в CSS на W3Schools — простой и понятный учебник по применению CSS для скрытия полос прокрутки.
2. HTML: Скрытие полосы прокрутки, но сохранив возможность прокрутки – Stack Overflow — сборник полезных советов и рекомендаций на Stack Overflow.
3. Свойство overflow в CSS на MDN — подробная информация о свойстве overflow на MDN.
4. HTML Стандарт для элемента iframe — официальные рекомендации по использованию iframe в HTML.
5. Поддержка свойства CSS overflow в браузерах | Can I use — актуальные данные о совместимости разных браузеров со свойством overflow.
6. Свойство overflow на CSS-Tricks — глубокий анализ свойства overflow от CSS-Tricks.