Safari/Chrome (Webkit) - Не удается скрыть вертикальную полосу прокрутки iframe

У меня есть iframe на www.example.com, который указывает на support.example.com(который является CNAME для иностранного домена).

Я автоматически изменяю размер моего iframe так, чтобы кадр не нуждался в каких-либо полосах прокрутки для отображения содержащейся веб-страницы.

В Firefox и IE это отлично работает, нет полосы прокрутки, так как я использую <iframe ... scrolling="no"></iframe>. Тем не менее, в браузерах веб-браузера (Safari и Chrome) вертикальная полоса прокрутки сохраняется даже тогда, когда имеется достаточно места для страницы без полосы прокрутки (полоса прокрутки выделена серым цветом).

Как скрыть панель прокрутки для веб-браузеров?

Ответы

Ответ 1

Я просто столкнулся с этой проблемой и обнаружил, что исправление заключалось в установке overflow: hidden в теге HTML страницы внутри iframe.

Ответ 2

Вы можете скрыть полосы прокрутки и сохранить функциональность прокрутки (с помощью сенсорной панели или колесика прокрутки или коснуться и перетащить на мобильный телефон или планшет, используя:

<style>
  iframe::-webkit-scrollbar {  
    display: none;
  }  
</style>

Очевидно, вы можете изменить iframe на то, что соответствует вашему дизайну, и вы можете добавить эквивалентное свойство -mozilla-свойство, чтобы оно также работало в firefox.

Ответ 3

Note: this is useful if you cannot edit the CSS / HTML of the iFramed content.

Это немного взломать, но я решил эту проблему, обернув <iframe> в <div>, установив высоту, ширину и overflow:hidden <div>, а затем установив ширину и высоту <iframe> на самом деле переполняет упаковку <div>.

<style>
  div {height:100px;width:100px;overflow:hidden}
  iframe {height:150px;width:150px;overflow:hidden}
</style>

<div>
  <iframe src="foo.html" scrolling="no"></iframe>
</div>

Надеюсь, что это поможет.

Ответ 4

Я предполагаю, что вы пробовали это, но не указали ли вы прокрутку на iframe?

<iframe scrolling="no">

Ответ 5

Чтобы избавиться от серых полос прокрутки, поставьте "overflow: hidden"; на теге тела страницы, отображаемой в Iframe, например. <body style="overflow:hidden;"> Это работало отлично для меня в Chrome 8.0.552.215, и у меня также был "переполнение: скрыто" на самом Iframe

Ответ 6

Помогает ли это? Работает на Chrome, IE, FF...

<style type="text/css">
html { overflow:hidden; }
#test { position:absolute; top:50; left:50; right:50; bottom:50; height:2000px; }
</style>

<body scroll="no">
<div id="test">content</div>
</body>

Ответ 7

Можете ли вы установить свойство overflow-y CSS для IFRAME на visible или hidden?

Ответ 8

проверьте, действительно ли свиток из iframe, возможно, это из HTML или BODY.

Для прокрутки в iframe

<iframe scrolling="no">

В css

iframe { overflow:hidden; }

or 

iframe { overflow-x:hidden; overflow-y:hidden}

Ответ 9

Я просто решил это в своем блоге с прокруткой = "нет" после тега стиля.

например:

iframe src="asdf.html" style="overflow: hidden;" scrolling="no"

Я оставил атрибут стиля там, потому что он более правильный, и он отлично работал на Firefox.

Ответ 10

Использование бета-версии Chrome 8.0.552.224 под Ubuntu 10.10 пока еще показывает полосы прокрутки призраков на этом сайте: http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe_scrolling. Я пробовал все трюки, которые работают во всех браузерах, но не в браузере на основе WebKit. Поэтому ошибка не полностью фиксируется.

Ответ 11

document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });

это работает, никто из других, похоже, не работал, включая e.preventDefault() для touchstart.

Ответ 12

Попробуйте это...

iframe { overflow:hidden; }

Ответ 13

не использовать прокрутку тега на всех в iframe и добавлять стиль как стиль = "переполнение-х: скрытый; переполнение-у: авто;" это приведет к удалению горизонтальной прокрутки, и она должна работать и наоборот.

-Jai

Ответ 14

Настройка атрибута прокрутки iframe на "no" должна исправить это, но в webkit появляется ошибка: https://bugs.webkit.org/show_bug.cgi?id=29240

Tim work-around (Safari/Chrome (Webkit) - не удается скрыть вертикальную полосу прокрутки iframe), кажется, исправляет проблему - , пока у вас есть возможность редактировать документ, содержащийся в iframe...

Ответ 15

скрывать прокрутку iframe в теге body chrome put, подобном этому

<body style="margin:0px; padding:0px; overflow:hidden;"></body>

Ответ 16

<iframe> <body style="overflow-x: hidden"> </body> </iframe>

Ответ 17

1. Когда вы меняете прокрутку iframe yes или no, панель прокрутки iframe не отображается сразу, вы должны обновить iframe.

2. переполнение переполнения html в iframe colud влияет на панель прокрутки iframe

3. В IE вы должны очистить iframe src, а затем обновить iframe, это будет работа

4.so, покажите вам код

HTML

<iframe id="main_ifrm" class="main"  frameborder="0" scrolling="no" src="new.html" ></iframe>
<button id="btn1">scrolling yes</button>

Javascript

var ifrm = document.getElementById("main_ifrm");
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
    $(ifrm).prop("scrolling","no");
    $(ifrm.contentWindow.document).find("html").css("overflow","hidden")
    var src = $(ifrm).prop("src");
    $(ifrm).prop("src","");
    $(ifrm).prop("src",src);
}