HTML iframe - отключить прокрутку

86

На моем сайте есть следующий iframe:

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe>

И у него есть полосы прокрутки.
Как от них избавиться?

Михал Герман
источник
6
Герман: Думаю, scrolling="no"должно работать. У меня работает. это в HTML5?
Yagnesh Agola
@Yagnesh Я отправил вам образец моего iframe, и он не работает.
Michał Herman
Я пробовал использовать ваш код, и он отлично работает без прокрутки. Пожалуйста, проверьте, находится ли iframe под любым div.
Yagnesh Agola
Возможно, <body> внутри iframe добавляет полосы прокрутки, а не <iframe>?
oriadam

Ответы:

166

К сожалению, я не верю, что это возможно в полностью совместимом HTML5 с использованием только свойств HTML и CSS. К счастью, большинство браузеров по-прежнему поддерживают это scrollingсвойство (которое было удалено из спецификации HTML5 ).

overflowне является решением для HTML5, поскольку единственный современный браузер, который ошибочно поддерживает его, - это Firefox.

Текущее решение - объединить два:

<iframe src="" scrolling="no"></iframe>
iframe {
  overflow: hidden;
}

Но это может оказаться устаревшим по мере обновления браузеров. Вы можете проверить это для решения JavaScript: http://www.christersvensson.com/html-tool/iframe.htm

Изменить: я проверил и scrolling="no"буду работать в IE10, Chrome 25 и Opera 12.12.

Джеймс Доннелли
источник
1
Атрибут прокрутки <iframe> не поддерживается в HTML5. Вместо этого используйте CSS. Источник: w3schools.com/tags/att_iframe_scrolling.asp
Линус
4
@LinusAn это то, что говорится в первой строке моего ответа. Проблема в том, что браузеры не могут просто отказаться от него, так как это нарушит работу веб-сайтов HTML4, поэтому этот scrollingатрибут по-прежнему является жизнеспособным, хотя и недопустимым вариантом.
Джеймс Доннелли
Это правильно, но в Chrome это нарушает scrollIntoView на элементах внутри iframe. См. Code.google.com/p/chromium/issues/detail?id=137214
Питер Брэнд,
@Linus - к сожалению, это не должно работать, и любые браузеры, в которых он работает, несовместимы: переполнение не должно применяться к замененным элементам, таким как кнопки, элементы формы и фреймы.
Джимми Брек-Маккай 09
3
@DaniSpringer Это решение ПРЕДНАЗНАЧЕНО для вырезания контента. Загрузка iframe без возможности прокрутки не приводит к автоматическому изменению размера всей дочерней страницы в соответствии с указанными размерами iframe.
Нейт
21

Я решил ту же проблему с этим css:

    pointer-events:none;
Джон Смит
источник
8
Кажется, блокирует физическую попытку прокрутки, только не визуальные полосы прокрутки ...
LWC
6
Это предотвратит запуск любых событий мыши в iframe, включая прокрутку. Слишком широко, чтобы быть надежным решением
Том Маккензи
Мне пришлось использовать это, чтобы предотвратить прокрутку в iframe, встроенном в foreignobjectизображение SVG (просто overflow: hiddenне сработало)
Тим
Это не останавливает прокрутку с помощью колеса прокрутки мыши (в Chromium). Также я считаю, что OP действительно хочет скрыть полосы прокрутки; вам следует переместить свой ответ на stackoverflow.com/questions/2712034, поскольку я считаю, что это частично решает этот вопрос.
EoghanM 08
Спасибо, по крайней мере, прокрутка iframe отключена.
Sören
11

Кажется, работает с использованием

html, body { overflow: hidden; }

внутри IFrame

edit: Конечно, это работает только в том случае, если у вас есть доступ к содержимому Iframe (которое у меня есть в моем случае)

Alex
источник
1
Однако при использовании iframe вы обычно не можете получить доступ к тому, что в нем, потому что это часто связано с включением контента в другой домен.
Тим Мэлоун
2

Установите все содержимое на:

#yourContent{
 width:100%;
height:100%;  // in you csss
}

Дело в том, что прокрутка iframe задается содержимым, а НЕ самим iframe.

установить содержимое на 100% внутри с помощью CSS и желаемое для iframe в HTML

Верде Мак
источник
1

Я попробовал scrolling = "no" в моем текущем браузере (Google Chrome версии 60.0.3112.113 (официальная сборка) (64-разрядная версия)), но это не сработало. Однако scroll = "no" действительно сработало. Возможно, стоит попробовать

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scroll="no" style="overflow: hidden"></iframe>
Зак Имхолте
источник
1
на самом деле, углубившись в это немного дальше, я думаю, что причина была в том, что я просто изменил height = "", чтобы он был больше, чем фактический iFrame, который я пытаюсь загрузить. Таким образом, если сделать высоту достаточно большой, чтобы прокрутка стала бессмысленной, полоса прокрутки исчезла для меня. Однако я пытаюсь отобразить всю страницу, что может отличаться от того, чего вы пытаетесь достичь.
Зак Имхолте
Это больше похоже на комментарий, чем на настоящий ответ на вопрос.
1
Спасибо JDV! Я новичок в StackOverflow, поэтому попытался прокомментировать, но не набрал достаточно очков репутации или как там это называется. Я согласен, это должен был быть комментарий. Цените ваше руководство!
Зак Имхолте
Есть способы внести свой вклад, пока не получите необходимую репутацию. stackoverflow.com/help/whats-reputation
0

Добавьте эти стили .. для своего тега iframe ..

overflow-x:hidden;
overflow-y:hidden;
саси
источник
8
Overflowне работает с HTML5 iFrames. Единственный браузер, который ошибочно поддерживает это, - Firefox.
Джеймс Доннелли
1
@JamesDonnelly На самом деле он не указал, что это html5, поэтому мы использовали переполнение
sasi
0

Поскольку "переполнение: скрыто;" свойство не работает должным образом в самом iFrame, но, похоже, дает результаты при применении к телу страницы внутри iFrame, я пробовал это:

iframe body { overflow:hidden; }

Что удивительно сделали работу с Firefox, удалением этих раздражающих скроллбаров.

Однако в Safari странная прозрачная линия шириной 2 пикселя появилась в правой части окна iframe, между его содержимым и границей. Странный.

Себ Заремба
источник
0

Просто добавьте iframe в стиле любого из приведенных ниже вариантов. Надеюсь, это решит проблему.

1-й вариант:

<iframe src="https://www.skyhub.ca/featured-listing" style="position: absolute; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>

2 вариант:

<iframe src="https://www.skyhub.ca/featured-listing" style="display: none;" onload="this.style.display='block';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>
Аршадул Хоссейн
источник
0

Это работает для меня:

<style>
*{overflow:hidden!important;}
html{overflow:scroll!important;}
</style>

Примечание: если вам нужна полоса прокрутки в любом другом элементе, также добавьте CSS {overflow:scroll!important;}к этому элементу

Черный огонь
источник
-1

Для этого кадра:

    <iframe src="" name="" id=""></iframe>

Я пробовал это на своем коде css:

    iframe#put the value of id here::-webkit-scrollbar {
         display: none;
    }
Лукас Сантос
источник
-1

ниже версий html5

iframe {
    overflow:hidden;
}

В html5

<iframe seamless="seamless"  ....>


iframe[seamless]{

   overflow: hidden;
}

но пока не поддерживается правильно

Прашоб
источник
2
В соответствии с этим и это , то seamlessатрибут был удален из спецификации.
Тим Мэлоун
-5

Вы можете использовать следующий код CSS:

margin-top: -145px; 
margin-left: -80px;
margin-bottom: -650px;

Чтобы ограничить просмотр iframe.

Жан Нувелле
источник
3
Это margin-downновая недвижимость или вы имели в виду margin-bottom?
Bjørn-Roger Kringsjå