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

110

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

— nkcmr
источник

1

возможный дубликат: Safari / Chrome (Webkit) - Невозможно скрыть вертикальную полосу прокрутки iframe и другие

— Мэтт Болл

iframe не находится в том же домене, что и родительская страница.

— nkcmr

переполнение-y: скрыто; Не работает в Google Chrome, Safari и Opera. Попробуйте с помощью jsfiddle.net/m5Btd/3

— phangia2712

208

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

CSS overflow-y: hidden;
scrolling="no" (для HTML4)
~~и 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

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