Ukryć poziomy pasek przewijania w elemencie iframe?

Odpowiedzi:

208

Sugerowałbym zrobienie tego z kombinacją

  1. CSS overflow-y: hidden;
  2. scrolling="no" (dla HTML4)
  3. 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>

Ś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