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

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

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

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

К сожалению, я не верю, что это возможно в полностью совместимом 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.

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

    pointer-events:none;

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

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;

Поскольку "переполнение: скрыто;" свойство не работает должным образом в самом 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;
}

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

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

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

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