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>

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

html css 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å