Герман: Думаю, 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.
@LinusAn это то, что говорится в первой строке моего ответа. Проблема в том, что браузеры не могут просто отказаться от него, так как это нарушит работу веб-сайтов HTML4, поэтому этот scrollingатрибут по-прежнему является жизнеспособным, хотя и недопустимым вариантом.
@Linus - к сожалению, это не должно работать, и любые браузеры, в которых он работает, несовместимы: переполнение не должно применяться к замененным элементам, таким как кнопки, элементы формы и фреймы.
Джимми Брек-Маккай 09
3
@DaniSpringer Это решение ПРЕДНАЗНАЧЕНО для вырезания контента. Загрузка iframe без возможности прокрутки не приводит к автоматическому изменению размера всей дочерней страницы в соответствии с указанными размерами iframe.
Кажется, блокирует физическую попытку прокрутки, только не визуальные полосы прокрутки ...
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 (которое у меня есть в моем случае)
Однако при использовании iframe вы обычно не можете получить доступ к тому, что в нем, потому что это часто связано с включением контента в другой домен.
Тим Мэлоун
2
Установите все содержимое на:
#yourContent{
width:100%;
height:100%; // in you csss
}
Дело в том, что прокрутка iframe задается содержимым, а НЕ самим iframe.
установить содержимое на 100% внутри с помощью CSS и желаемое для iframe в HTML
Я попробовал scrolling = "no" в моем текущем браузере (Google Chrome версии 60.0.3112.113 (официальная сборка) (64-разрядная версия)), но это не сработало. Однако scroll = "no" действительно сработало. Возможно, стоит попробовать
на самом деле, углубившись в это немного дальше, я думаю, что причина была в том, что я просто изменил height = "", чтобы он был больше, чем фактический iFrame, который я пытаюсь загрузить. Таким образом, если сделать высоту достаточно большой, чтобы прокрутка стала бессмысленной, полоса прокрутки исчезла для меня. Однако я пытаюсь отобразить всю страницу, что может отличаться от того, чего вы пытаетесь достичь.
Зак Имхолте
Это больше похоже на комментарий, чем на настоящий ответ на вопрос.
1
Спасибо JDV! Я новичок в StackOverflow, поэтому попытался прокомментировать, но не набрал достаточно очков репутации или как там это называется. Я согласен, это должен был быть комментарий. Цените ваше руководство!
Overflowне работает с HTML5 iFrames. Единственный браузер, который ошибочно поддерживает это, - Firefox.
Джеймс Доннелли
1
@JamesDonnelly На самом деле он не указал, что это html5, поэтому мы использовали переполнение
sasi
0
Поскольку "переполнение: скрыто;" свойство не работает должным образом в самом iFrame, но, похоже, дает результаты при применении к телу страницы внутри iFrame, я пробовал это:
iframebody { overflow:hidden; }
Что удивительно сделали работу с Firefox, удалением этих раздражающих скроллбаров.
Однако в Safari странная прозрачная линия шириной 2 пикселя появилась в правой части окна iframe, между его содержимым и границей. Странный.
scrolling="no"
должно работать. У меня работает. это в HTML5?Ответы:
К сожалению, я не верю, что это возможно в полностью совместимом 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.источник
scrolling
атрибут по-прежнему является жизнеспособным, хотя и недопустимым вариантом.Я решил ту же проблему с этим css:
pointer-events:none;
источник
foreignobject
изображение SVG (простоoverflow: hidden
не сработало)Кажется, работает с использованием
html, body { overflow: hidden; }
внутри IFrame
edit: Конечно, это работает только в том случае, если у вас есть доступ к содержимому Iframe (которое у меня есть в моем случае)
источник
Установите все содержимое на:
#yourContent{ width:100%; height:100%; // in you csss }
Дело в том, что прокрутка iframe задается содержимым, а НЕ самим iframe.
установить содержимое на 100% внутри с помощью CSS и желаемое для iframe в HTML
источник
Я попробовал 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>
источник
Добавьте эти стили .. для своего тега iframe ..
overflow-x:hidden; overflow-y:hidden;
источник
Overflow
не работает с HTML5 iFrames. Единственный браузер, который ошибочно поддерживает это, - Firefox.Поскольку "переполнение: скрыто;" свойство не работает должным образом в самом iFrame, но, похоже, дает результаты при применении к телу страницы внутри iFrame, я пробовал это:
iframe body { overflow:hidden; }
Что удивительно сделали работу с Firefox, удалением этих раздражающих скроллбаров.
Однако в Safari странная прозрачная линия шириной 2 пикселя появилась в правой части окна iframe, между его содержимым и границей. Странный.
источник
Просто добавьте 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>
источник
Это работает для меня:
<style> *{overflow:hidden!important;} html{overflow:scroll!important;} </style>
Примечание: если вам нужна полоса прокрутки в любом другом элементе, также добавьте CSS
{overflow:scroll!important;}
к этому элементуисточник
Для этого кадра:
<iframe src="" name="" id=""></iframe>
Я пробовал это на своем коде css:
iframe#put the value of id here::-webkit-scrollbar { display: none; }
источник
ниже версий html5
iframe { overflow:hidden; }
В html5
<iframe seamless="seamless" ....> iframe[seamless]{ overflow: hidden; }
но пока не поддерживается правильно
источник
seamless
атрибут был удален из спецификации.Вы можете использовать следующий код CSS:
margin-top: -145px; margin-left: -80px; margin-bottom: -650px;
Чтобы ограничить просмотр iframe.
источник
margin-down
новая недвижимость или вы имели в видуmargin-bottom
?