Вопрос по iframe, html, css – Удалить полосу прокрутки из iframe

87

Используя этот код

<code><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>
</code>

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

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

Спасибо.

дублировать с / Stackoverflow.com вопросы / 4856746 / ... у которого есть лучший ответ Daniël Tulp

Ваш Ответ

10   ответов
8

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

 1. XHTML => scrolling="no"
 2. HTML5 => seamless="seamless"
Вы должны использовать css вместо бесшовного атрибута. Nima Rahbar
Бесшовные атрибут был удалено из HTML. neopickaze
@ NimaRahbar Атрибут seamless может быть устаревшим, но css не поддерживает параметры iframe. Abandoned Cart
16

в твоем css:

iframe{
    overflow:hidden;
}
Это не работает, так как это не повлияет на содержание iframe, только на сам iframe. Решение - прокрутка = "нет". Lars Van de Donk
Спасибо, но только горизонтальная прокрутка и все еще отображается в Firefox. Не отображается ни в Chrome, ни в IE. Кроме того, CSS для полосы прокрутки применяется эффективно только в IE, а не в FF и Chrome (последние показывают по умолчанию бежевый цвет / оттенки). Faith In Unseen Things
не работает: Jsfiddle.net / greggman / 98ttg9vz gman
Это не сработает, потому что переполнение происходит в документе iframe, который вы, как правило, не сможете изменить из-за междоменных ограничений безопасности iframe. thdoan
Это неправильный ответ, не удаляет полосы прокрутки в Google Chrome, но прокрутка = "нет" делает. Anders Lindén
231

scrolling="no" приписать iframe.

можно сделать это с помощью CSS? Evorlor
Да, но тогда в Chrome нельзя использовать scrollIntoView. Видеть Code.google.com / р / хром / вопросы / детали? ID = 137214 Peter Brand
@ MikePoole Это может быть официально устарело, но это не помогло установитьoverflow:hidden; на Chrome 65.0.3325.181, ноscrolling="no" помогло. some
хорошо, это скрывает полосу прокрутки контента и предотвращает прокрутку контента. это не мешает появлению полосы прокрутки в iframe. Dave Cousineau
Атрибут прокрутки в iframe теперь официально устарел. Вместо этого следует использовать CSS. Mike Poole
12

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

Если это помогает, есть проблема в Firefox, где, если у вас есть элемент CSStransform: scale(0.7) или так, это создаст полосы прокрутки (которые будут отображаться в вашем iFrame), если вы не обрезаете его с помощьюoverflow: hidden; на предке (может быть div вместо тела). WraithKenny
Это потому, что это «прокрутка = нет», а не «прокрутка = нет». Bryan Green
Загружен внутри <iframe src = "/ test.html">, где test.html имеет этот параметр. nirvana74v
Большая помощь!!!! Mike Keskinov
ты имеешь в виду, загружен внутри нашего загружен? Что вокруг чего? João Pimentel Ferreira
23

Это работает во всех браузерах. jsfiddle здесьhttp: //jsfiddle.net/zvhysct7/1

<iframe src="http://buythecity.com"  scrolling="no" style=" width: 550px; height: 500px;  overflow: hidden;" ></iframe>
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>;

и он не будет показывать полосу прокрутки в любом браузере.

seamlessтрибут @ не является допустимым HTML5, не поддерживается большинством браузеров Caniuse.com / # поиск = бесшовная), и большинство других стилей не нужны. Pere
3

чтобы скрыть только горизонтальную полосу прокрутки

iframe{
    overflow-x:hidden;
}
7

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

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

iframe, это может быть связано с тем, что содержимое iframe имеет полосы прокрутки на элементахниж thehtml элемент!

Некоторые макеты установленыhtml а такжеbody до 100% высоты, и используйте#wrapper div сoverflow: auto; (илиscroll), тем самым перемещая прокрутку к#wrapper element.

В таком случае ничто из того, что вы сделаете, не помешает появлению полос прокрутки, кроме редактирования содержимого другой страницы.

2

::-webkit-scrollbar псевдоэлемент наiframe родитель, чтобы избавиться от этих знаменитых полос прокрутки 90-х.

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

Редактировать хотя это относительно поддерживается, ::-webkit-scrollbar может не подходить для всех браузеров. используйте с осторожностью :

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

Похожие вопросы