Удалить полосу прокрутки из 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>

Вот как это выглядит (чат на домашней странице http://www.talkjesus.com )

Как удалить горизонтальную полосу прокрутки и изменить CSS вертикальной полосы прокрутки?

html css iframe

— Вера в невидимое
источник

2

дублировать с помощью stackoverflow.com/questions/4856746/…, у которого есть лучший ответ

— Даниэль Тулп

9

в вашем css:

iframe{
    overflow:hidden;
}

— Такиен
источник

7

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

— Faith In Unseen Things

3

Это не сработает, потому что переполнение происходит в документе iframe, который вы, как правило, не сможете изменить из-за ограничений безопасности междоменного iframe.

— thdoan

54

Это не работает, так как это не повлияет на содержимое iframe, только на сам iframe. Решение прокрутки = "нет".

— TheLD

4

Это неправильный ответ, не удаляет полосы прокрутки в Google Chrome, но scrolling = "no" удаляет.

— Anders Lindén

@LarsVandeDonk Ваш ответ должен быть правильным.

— Wong Jia Hau

314

Добавьте scrolling="no"атрибут в iframe.

— THRIVE
источник

1

в состоянии сделать это с помощью css?

— Evorlor

1

Да, но тогда в Chrome нельзя использовать scrollIntoView. См. Code.google.com/p/chromium/issues/detail?id=137214

— Питер Брэнд,

1

ну, это скрывает полосу прокрутки содержимого и предотвращает прокрутку содержимого. это не препятствует появлению полосы прокрутки iframe.

— Dave Cousineau

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>

— Тьягараджан С
источник

21

Добавление scroll="no"и style="overflow:hidden"в iframe не сработало, мне пришлось добавить style="overflow:hidden"тело HTML-документа, загруженного внутри iframe.

— nirvana74v
источник

1

Если это помогает, есть проблема в Firefox, где, если у вас есть элемент CSS transform: scale(0.7)или что-то подобное, это создаст полосы прокрутки (которые будут отображаться в вашем iFrame), если вы не закрепите его overflow: hidden;на предке (может быть div вместо тела).

— 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>

Развернуть фрагмент

— Allabux B
источник

11

Просто добавь scrolling="no"и seamless="seamless"атрибуты IFrame тега. как это:-

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

— Нима Рахбар
источник

13

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

— neopickaze

Вы должны использовать css вместо атрибута seamless.

— Нима Рахбар

@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>;

Используйте указанный выше div, и он не будет отображать полосу прокрутки ни в одном браузере.

— 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

Это единственный ответ, который мне помог. Вы все еще можете прокручивать, но вы не видите уродливую полосу прокрутки. Спасибо!

— Кармиджанов 09

4

Добавьте это в свой CSS, чтобы скрыть только горизонтальную полосу прокрутки

iframe{
    overflow-x:hidden;
}

— Abhidev
источник

3

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

Таким образом вы увеличиваете ширину iframe больше, чем должна быть. Затем вы скрываете горизонтальную полосу прокрутки с помощью overflow-x: hidden.

— Нико Гриль
источник