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

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


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

Ответы (4)


arrow_upward
210
arrow_downward

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

  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>

person Chase Florell    schedule 31.01.2011
comment
Я загрузил ваш пример в Chrome 15 и все еще вижу полосы прокрутки. - person Dan; 18.12.2011
comment
Добавление атрибута scrolling="no" в iframe, похоже, удаляет полосы прокрутки в Chrome. - person Nick; 13.02.2012
comment
@Nick Он не удаляет его на хроме, по крайней мере, на моем компьютере. img339.imageshack.us/img339/6685/chromelj.png - person l46kok; 06.02.2013
comment
@ l46kok на вашем скриншоте нет scrolling="no" - person Chase Florell; 06.02.2013
comment
Ой .. Я просто щелкнул ссылку в ответе и предположил, что прокрутка = нет уже там .. Мое плохое за то, что не проверил - person l46kok; 06.02.2013
comment
Примечание: scrolling="no" больше не поддерживается в HTML5. Итак, предлагаемый способ CSS или атрибут seamless < / a> (если поддерживается) - лучшие решения. - person insertusernamehere; 02.07.2014
comment
спасибо @insertusernamehere, я обновил ответ, чтобы отразить этот новый тег. - person Chase Florell; 03.07.2014
comment
Обратите внимание, что атрибут Кажется, в настоящее время не поддерживается ни одним из основных браузеров. caniuse.com/#feat=iframe-seamless - person Liyali; 10.10.2014
comment
Атрибут бесшовные, похоже, был удален в январе 2016 г .: github.com/whatwg/html / issues / 331 # issuecomment-173923225 - person sanzante; 09.03.2016
comment
Это не работает динамически. Атрибуты должны быть там до загрузки iframe. Если вы установите атрибуты динамически, полоса прокрутки не исчезнет, ​​пока вы не обновите iframe. Есть идеи? - person Maciej Krawczyk; 19.03.2016

arrow_upward
26
arrow_downward

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

person Rahul Dadhich    schedule 10.05.2013
comment
Хотя он пользуется широкой поддержкой, согласно MDN, атрибут scrolling устарел. - person JamesQMurphy; 01.05.2021

arrow_upward
15
arrow_downward

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

body {
    overflow:hidden;
}

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

http://jsfiddle.net/u5gLoav9/

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

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

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

  • Никаких JS или jQuery не требуется.

Примечания:

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

overflow-x: hidden;
person GibboK    schedule 23.04.2015

arrow_upward
2
arrow_downward

Этот ответ применим только к веб-сайтам, использующим 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

person Razan Paul    schedule 12.02.2015