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

110

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

— nkcmr
джерело

1

можливий дублікат: Safari / Chrome (Webkit) - Неможливо приховати вертикальну панель прокрутки iframe та інші

— Matt Ball

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

— nkcmr

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

— phangia2712

208

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

CSS overflow-y: hidden;
scrolling="no" (для HTML4)
~~та 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

26

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

— Рахул Дадхіч
джерело

15

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

body {
    overflow:hidden;
}

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

http://jsfiddle.net/u5gLoav9/

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

Тримайте HTML5 дійсним, оскільки йому не потрібен scrolling="no"атрибут на iframe(цей атрибут у HTML5 застарілий).
Працює на більшості браузерів, що використовують перелив CSS : приховано
Не потрібно JS або jQuery.

Примітки:

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

overflow-x: hidden;

— GibboK
джерело

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

— Разан Павло
джерело