Ukryć poziomy pasek przewijania na ramce iframe?

Muszę ukryć poziomy scollbar na iframe za pomocą css, jquery lub js.

Author: GibboK, 2011-01-31
Source

4 answers

Proponuję zrobić to z kombinacją

  1. CSS overflow-y: hidden;
  2. scrolling="no" (dla HTML4)
  3. i seamless="seamless" (dla HTML5)*

* atrybut seamless mA usunięto ze standardu i żadne przeglądarki nie obsługują go.

.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}
<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>
 209
Author: Chase Florell,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-01 16:09:14

Ustaw atrybut scrolling="no" w ramce iframe.

 26
Author: Rahul Dadhich,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-29 10:57:18

Jeśli możesz zmienić kod dokumentu wewnątrz iframe i ta zawartość jest widoczna tylko w 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 atrybutu scrolling="no" na iframe (ten atrybut w HTML5 został wycofany).

  • Prace na większość przeglądarek używających CSS overflow: hidden

  • Brak JS lub jQuery konieczne.

Uwagi:

Aby wyłączyć przewijanie pasków w poziomie, użyj tego CSS zamiast: 

overflow-x: hidden;
 15
Author: GibboK,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-23 13:06:26

Ta odpowiedź dotyczy tylko stron internetowych, które używają Bootstrap. Funkcja szybkiego osadzania w Bootstrap zajmuje się paskami 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

 2
Author: Razan Paul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-12 22:47:09