Видаліть смугу прокрутки з iframe

117

Використовуючи цей код

<iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="1" marginwidth="1" name="cboxmain" id="cboxmain" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

Так виглядає (shoutbox на домашній сторінці http://www.talkjesus.com )

Як видалити горизонтальну смугу прокрутки та змінити css вертикальної смуги прокрутки?

html css iframe

— Віра в небачені речі
джерело

2

дублікат із stackoverflow.com/questions/4856746/…, що має кращу відповідь

— Daniël Tulp

9

у вашому css:

iframe{
    overflow:hidden;
}

— takien
джерело

7

Дякую, але лише горизонтальна прокрутка і все ще відображається у Firefox. Не відображається в Chrome чи IE. Крім того, CSS для смуги прокрутки ефективно застосовується лише в IE, а не FF і Chrome (останні показують бежевий колір / відтінки за замовчуванням).

— Віра в небачені речі

3

Це не спрацює, оскільки переповнення трапляється в документі iframe, який ви, як правило, не зможете змінити через обмеження безпеки для міждоменного iframe.

— thoan

54

Це не працює, оскільки це не вплине на вміст iframe, лише сам кадр iframe. Рішення прокручується = "ні".

— TheLD

4

Це неправильна відповідь, не вилучає смуги прокрутки в Google Chrome, але прокрутка = "ні" робить.

— Андерс Лінден

@LarsVandeDonk Ваша відповідь має бути правильним рішенням.

— Вонг Цзя Хау

313

Додати scrolling="no"атрибут iframe.

— ТРИВ
джерело

1

вдається це зробити за допомогою css?

— Еворлор

1

Так, але тоді в Chrome не можна використовувати scrollIntoView. Дивіться code.google.com/p/chromium/isissue/detail?id=137214

— Пітер Бренд

1

добре, це приховує смугу прокрутки вмісту і не дозволяє прокручувати вміст. це не перешкоджає появі смуги прокрутки iframe.

— Дейв Кузен

3

Атрибут прокрутки на iframe зараз офіційно застарілий. Натомість слід використовувати CSS.

— Майк Пул

4

@MikePoole Це може бути офіційно застарілим, але налаштування overflow:hidden;на Chrome 65.0.3325.181 не scrolling="no"допомогло , але допомогло.

— десь

28

Це працює у всіх браузерах. jsfiddle тут http://jsfiddle.net/zvhysct7/1/

<iframe src="http://buythecity.com"  scrolling="no" style=" width: 550px; height: 500px;  overflow: hidden;" ></iframe>

— Thyagarajan C
джерело

21

Додавання scroll="no"та style="overflow:hidden"iframe не спрацювало, мені довелося додати style="overflow:hidden"на корпус html-документа, завантаженого всередині iframe.

— nirvana74v
джерело

1

Якщо це допоможе, у Firefox виникла проблема, де, якщо у вас є елемент CSS transform: scale(0.7)або такий, це створить смуги прокрутки (які відображатимуться у вашій iFrame), якщо ви не вирізаєте його з overflow: hidden;предком (може бути дівом замість тіло).

— WraithKenny

8

Це тому, що це "прокрутка = ні", а не "прокрутка = ні".

— Брайан Грін

ти маєш на увазі завантажений всередині нашого завантаженого? Що навколо чого?

— Жоао Піментел Феррейра

завантажується всередині <iframe src = "/ test.html">, де test.html має цей параметр.

— nirvana74v

16

Спробуйте додати scrolling="no"атрибут, як показано нижче:

<iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'></iframe>

Розгорніть фрагмент

— Аллабукс В
джерело

11

Просто додайте scrolling="no"та seamless="seamless"атрибути до тегу iframe. подобається це:-

 1. XHTML => scrolling="no"
 2. HTML5 => seamless="seamless"

— Німа Рахбар
джерело

13

Атрибут безшовного тексту видалено з HTML .

— neopickaze

Ви повинні використовувати css замість атрибута "безшовний".

— Німа Рахбар

@NimaRahbar Атрибут "безшовний" може бути застарілим, але css не підтримує параметри iframe.

— Покинутий кошик

9

Якщо хто -то тут виникають проблеми з відключенням скроллбар на iframe, це може бути тому , що зміст цього IFrame має смуги прокрутки на елементи нижче в htmlелементі!

Деякі макети встановлені htmlі bodyдо 100% висоти, а також використовувати #wrapperDIV з overflow: auto;(або scroll), тим самим переміщаючи прокрутку до #wrapperелементу.

У такому випадку нічого, що ви зробите, не завадить показувати смуги прокрутки, крім редагування вмісту іншої сторінки.

— WraithKenny
джерело

8

<div id="myInfoDiv" seamless="seamless" scrolling="no" style="width:100%; height: 100%; float: left; color: #FFF; background:#ed8719; line-height:100%; font-size:100%; font-family: sans-serif>;

Скористайтеся наведеним вище ділом, і він не відображатиметься в будь-якому браузері.

— KnightFury
джерело

3

seamlessатрибут не є дійсним HTML5, не підтримується більшістю браузерів ( caniuse.com/#search=seamless ), і більшість інших стилів непотрібні.

— Пер

8

Додайте це у свій css, щоб приховати обидві смуги прокрутки

iframe 
{
  overflow-x:hidden;
  overflow-Y:hidden;
}

— Діпіка Патель
джерело

6

Це в крайньому випадку, але варто згадати - ви можете використовувати ::-webkit-scrollbarпсевдоелемент iframeбатька батька, щоб позбутися тих відомих смуг прокрутки 90-х.

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

Редагувати: хоч це відносно підтримується , ::-webkit-scrollbarможливо, не підходить для всіх браузерів. використовувати обережно :)

— DotBot
джерело

2

Це єдина відповідь, яка мені допомогла. Ви все ще можете прокручувати, але ви не бачите потворної смуги прокрутки. Дякую!

— Карміджанов

4

Додайте це у свій css, щоб приховати лише горизонтальну смугу прокрутки

iframe{
    overflow-x:hidden;
}

— Абхідев
джерело

3

iframe {
  display: block;
  border: none;         /* Reset default border */
  height: 100vh;        /* Viewport-relative units */
  width: calc(100% + 17px);
}
div {
  overflow-x: hidden;
}

У такий спосіб ви зробите ширину рамки більше, ніж повинна бути. Потім ви ховаєте горизонтальну смугу прокрутки за допомогою overflow-x: hidden.

— Ніко Гриль
джерело