Ukryć poziomy pasek przewijania w elemencie iframe?

110

Muszę ukryć poziomy pasek przewijania w elemencie iframe, używając css, jquery lub js.

— nkcmr
źródło

1

możliwy duplikat: Safari / Chrome (Webkit) - Nie można ukryć pionowego paska przewijania iframe i innych

— Matt Ball

iframe nie znajduje się w tej samej domenie co strona nadrzędna.

— nkcmr

overflow-y: ukryty; Nie działa w Google Chrome, Safari i Opera. Wypróbuj z jsfiddle.net/m5Btd/3

— phangia2712

208

Sugerowałbym zrobienie tego z kombinacją

CSS overflow-y: hidden;
scrolling="no" (dla HTML4)
~~i seamless="seamless"(dla HTML5)~~*

^{* seamlessAtrybut został usunięty ze standardu i żadna przeglądarka go nie obsługuje.}

.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}

<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>

Rozwiń fragment

— Ścigaj Florell
źródło

9

Załadowałem Twój przykład na Chrome 15 i nadal widzę paski przewijania.

— Dan

61

scrolling="no"Wydaje się, że dodanie atrybutu do elementu iframe usuwa paski przewijania w Chrome.

— Nick

2

@Nick Nie usuwa go z Chrome przynajmniej na moim komputerze. img339.imageshack.us/img339/6685/chromelj.png

— l46kok

1

@ l46kok Twój zrzut ekranu nie zawierascrolling="no"

— Chase Florell,

3

Zauważ, że atrybut pozorny nie jest obecnie obsługiwany przez żadną z głównych przeglądarek . caniuse.com/#feat=iframe-seatible

— Liyali

26

ustaw scrolling="no"atrybut w swoim iframe.

— Rahul Dadhich
źródło

15

Jeśli możesz zmienić kod dokumentu w swoim iframei ta zawartość jest widoczna tylko w jego oknie nadrzędnym, po prostu dodaj następujący CSS w swoim iframe:

body {
    overflow:hidden;
}

Oto bardzo prosty przykład:

http://jsfiddle.net/u5gLoav9/

To rozwiązanie pozwala na:

Zachowaj poprawność HTML5, ponieważ nie wymaga scrolling="no"atrybutu w iframe(ten atrybut w HTML5 został wycofany).
Działa na większości przeglądarek korzystających z przepełnienia CSS : ukryty
Nie potrzeba JS ani jQuery.

Uwagi:

Aby nie zezwalać na poziome paski przewijania, użyj tego CSS:

overflow-x: hidden;

— GibboK
źródło

2

Ta odpowiedź dotyczy tylko witryn korzystających z Bootstrap. Responsywna funkcja osadzania w Bootstrap obsługuje paski przewijania.

<!-- 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

— Razan Paul
źródło