Скрыть горизонтальную полосу прокрутки в iframe?

110

Мне нужно скрыть горизонтальную полосу прокрутки в iframe с помощью css, jquery или js.

html iframe scrollbar hide nkcmr
источник
1
возможный дубликат: Safari / Chrome (Webkit) - Невозможно скрыть вертикальную полосу прокрутки iframe и другие
Мэтт Болл
iframe не находится в том же домене, что и родительская страница.
nkcmr
переполнение-y: скрыто; Не работает в Google Chrome, Safari и Opera. Попробуйте с помощью jsfiddle.net/m5Btd/3
phangia2712

Ответы:

208

Я бы предложил сделать это с помощью комбинации

  1. CSS overflow-y: hidden;
  2. scrolling="no" (для HTML4)
  3. и seamless="seamless"(для HTML5)*

* seamlessАтрибут был удален из стандарта, и никакие браузеры не поддерживают его.

.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}
<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>
Развернуть фрагмент

Чейз Флорелл
источник
9
Я загрузил ваш пример в Chrome 15 и все еще вижу полосы прокрутки.
Дэн
61
Добавление scrolling="no"атрибута в iframe, похоже, удаляет полосы прокрутки в Chrome.
Ник
2
@Nick Он не удаляет его на хроме, по крайней мере, на моем компьютере. img339.imageshack.us/img339/6685/chromelj.png
l46kok 06
1
@ l46kok, на вашем скриншоте нетscrolling="no"
Чейз Флорелл
3
Обратите внимание, что в настоящее время атрибут кажущегося не поддерживается ни одним из основных браузеров . caniuse.com/#feat=iframe-seamless
Лияли
26

установить scrolling="no"атрибут в вашем iframe.

Рахул Дадхич
источник
15

Если вам разрешено изменять код документа внутри вашего iframeи этот контент виден только в его родительском окне, просто добавьте следующий CSS в ваш iframe:

body {
    overflow:hidden;
}

Вот очень простой пример:

http://jsfiddle.net/u5gLoav9/

Это решение позволяет:

  • Держите HTML5 в силе, поскольку для него не нужен scrolling="no"атрибут iframe(этот атрибут в HTML5 устарел).

  • Работает в большинстве браузеров с использованием CSS overflow: hidden

  • Нет необходимости в JS или jQuery.

Ноты:

Чтобы запретить использование полос прокрутки по горизонтали, используйте вместо этого этот CSS:

overflow-x: hidden;
GibboK
источник
2

Этот ответ применим только к веб-сайтам, использующим Bootstrap. Функция адаптивного встраивания в Bootstrap заботится о полосах прокрутки.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>

jsfiddle: http://jsfiddle.net/00qggsjj/2/

http://getbootstrap.com/components/#responsive-embed

Разан Пол
источник