Скрыть горизонтальный скролл в iframe: CSS, jQuery

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

Чтобы скрыть горизонтальную полосу прокрутки в iframe, примените свойство CSS overflow-x: hidden; непосредственно к элементу iframe:

iframe {
  overflow-x: hidden;   /* Больше нет горизонтальной прокрутки, et voilà! */
}

Этот небольшой фрагмент CSS убирает горизонтальную прокрутку, при этом сохраняющий чистоту вёрстки и возможность вертикальной прокрутки.

Обеспечение вертикальной прокрутки и отзывчивости

Включение вертикальной прокрутки

Чтобы обеспечить удобство пользователя без ущерба для дизайна, активируйте вертикальную прокрутку в iframe добавив следующий CSS:

iframe {
  overflow-x: hidden;   /* Горизонтального привидения уже не вернуть */
  overflow-y: auto; /* Вертикальная прокрутка доступна, приятного чтения! */
}

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

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

Реализация отзывчивости

Фиксированные размеры могут вызвать появление нежелательной горизонтальной полосы прокрутки. Чтобы создать отзывчивые iframe используйте предлагаемые Bootstrap'ом классы:

<!-- Благодаря Bootstrap вы станете гуру отзывчивости -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="your-source-here.html"></iframe>
</div>

Использование классов для улучшения управления

Создание отдельного класса для iframe облегчит вашу работу и поможет избежать конфликтов стилей. Вот пример оформления:

/* Теперь у вас есть ваш собственный класс для идеального iframe */
.responsive-iframe {
  overflow-x: hidden; 
  overflow-y: auto;
}

/* И применение класса к iframe */
<iframe class="responsive-iframe" src="your-content.html"></iframe>

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

Представьте себе художественную галерею, стены которой украшают картины (🖼️). Ваш iframe — это окно (🪟), через которое вы смотрите на искусство.

🖼️🖼️🖼️🖼️    ☀ Посетители любуются вашими творениями
🖼️🖼️🖼️🖼️
🪟👀 <- Вы здесь!

Теперь мы слегка опустим шторы (👁️‍🗨️), чтобы скрыть вид снизу:

🖼️🖼️🖼️🖼️   🔝 Еще больше впечатляющего искусства
🖼️🖼️🖼️🖼️   🖼️ <- Изысканные экспонаты
🪟👁️‍🗨️       ⬜ <- Горизонтальная полоса прокрутки? Какая горизонтальная полоса прокрутки?

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

Работа в различных браузерах и на разных устройствах

Тестирование в различных браузерах

Протестировать ваше решение в разных браузерах крайне важно. Свойство overflow-x: hidden; в большинстве случаев работает отлично, но каждый браузер может иметь свои специфичные особенности.

Адаптация под различные устройства

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

Избегание потенциальных проблем

Навигация по конфликтам стилей

Конфликты стилей могут привести к тому, что ваш CSS не будет влиять на iframe. Используйте специфические селекторы и управляйте каскадностью, чтобы ваши стили были приоритетными.

Использование валидных атрибутов

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

Обновление соответствующее стандартам

Атрибут seamless, применяемый для iframes, был популярен в прошлом, но сейчас не поддерживается HTML5. Браузеры не поддерживают его, что делает его использование нерациональным.

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

1. Свойство CSS Overflow | CSS-Tricks – подробный анализ свойства overflow, необходимого для управления полосами прокрутки.
2. overflow – CSS: Каскадные таблицы стилей | MDN – подробная документация по свойству overflow от Mozilla. Понимание данного свойства является критически важным для правильной работы с CSS.
3. Как скрыть полосы прокрутки с помощью CSS – простое пошаговое руководство, обясняющее, как скрыть полосы прокрутки с помощью CSS.
4. Скрыть полосу прокрутки, но позволить прокрутку – Stack Overflow – актуальная дискуссия на Stack Overflow на тему скрытия полос прокрутки в iframe.
5. CodePen от Chris Coyier – пример от Chrisa Coyier на CodePen, демонстрирующий методы скрытия полос прокрутки при сохранении функциональности прокрутки.