Удалить полосу прокрутки из 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 вертикальной полосы прокрутки?


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.


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"помогло.
некоторые


21

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


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>


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элементу.

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


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, и он не будет отображать полосу прокрутки ни в одном браузере.


3
seamlessатрибут не является допустимым HTML5, не поддерживается большинством браузеров ( caniuse.com/#search=seamless ), и большая часть других стилей не нужна.
Пере


6

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

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

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


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

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.