Сховати горизонтальну смугу прокрутки на кадрі?


110

Мені потрібно приховати горизонтальну панель пропуску на iframe за допомогою css, jquery або js.



iframe не на тому самому домені, як батьківська сторінка.
nkcmr

переповнення-у: приховано; Не працює в Google Chrome, Safari та Opera. Спробуйте це з jsfiddle.net/m5Btd/3
phangia2712

Відповіді:


208

Я б запропонував зробити це за допомогою комбінації

  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>


9
Я завантажив ваш приклад на Chrome 15 і досі бачу смуги прокрутки.
День

61
Додавання scrolling="no"атрибута до iframe видає видалення смуг прокрутки в Chrome.
Нік

2
@Nick Принаймні на моєму комп’ютері це не знімає хром. img339.imageshack.us/img339/6685/chromelj.png
l46kok

1
@ l46kok ваш знімок екрана не включаєscrolling="no"
Chase Florell

3
Зауважте, що зовнішній атрибут наразі не підтримується жодним із основних браузерів . caniuse.com/#feat=iframe-seamless
Liyali


15

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

body {
    overflow:hidden;
}

Ось дуже простий приклад:

http://jsfiddle.net/u5gLoav9/

Це рішення дозволяє:

  • Тримайте HTML5 дійсним, оскільки йому не потрібен scrolling="no"атрибут на iframe(цей атрибут у HTML5 застарілий).

  • Працює на більшості браузерів, що використовують перелив CSS : приховано

  • Не потрібно JS або jQuery.

Примітки:

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

overflow-x: hidden;

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.