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

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