Полосы прокрутки IFrame не доступны в Chrome - PullRequest
Новая
       28

Полосы прокрутки IFrame не доступны в Chrome

9 голосов
/ 01 июня 2011

Я использую IFrame, чтобы показывать контент из другого домена. Проблема в том, что я могу использовать указанную высоту и ширину (которые я использую), и содержимое внутри IFrame не может быть полностью размещено в IFrame. Следовательно, мне нужны полосы прокрутки.

Я использовал следующий HTML-код - 

**<iframe style = "overflow-x:scroll; overflow-y:scroll;" src =       "http://shopsocial.ly/merchant/fanpage?merchant_name=cafepress"
     height = "400" width = "500">**

Это отлично работает в Firefox. Но в Chrome я не получаю полосу прокрутки в IFrame. Я искал эту проблему и перепробовал много вещей, которые не решили мою проблему. Может ли кто-нибудь помочь мне с этим?

Ответы [ 4 ]

3 голосов
/ 13 ноября 2014

В свой контент iframe добавьте: 

<body style="overflow:auto;">

или в css-файле, прикрепленном к iframe 

html, body {
   overflow:auto;
}

и, конечно, в соответствии с рекомендациями Тома, убедитесь, что вы используете scrolling="yes" и style="overflow:visible;" в iframe: 

<iframe scrolling="yes" src="http://example.com" style="overflow:visible;"></iframe>

Если это все еще не работает, попробуйте обернуть iframe следующим образом: 

<div style="overflow:visible; height:400px;">

    <iframe scrolling="yes" src="http://example.com" style="overflow:visible; height:2000px;"></iframe>

</div>
3 голосов
/ 01 июня 2011

Вместо использования стиля CSS вы можете использовать свойство scrolling в iframe и установить его на yes (т.е. всегда отображать полосы прокрутки): 

<iframe scrolling="yes" src="http://domain.com" height="400" width="500"></iframe>
0 голосов
/ 15 декабря 2018

Чтобы сделать эту прокрутку на всех мобильных устройствах (особенно на устройствах iPhone), вам нужно добавить CSS в div вокруг iframe: 

<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;">
<iframe scrolling="yes" src="http://example.com" height="400" width="500">Loading...</iframe>
</div>
0 голосов
/ 10 марта 2012

Яп Том абсолютно прав, вы можете использовать 

<iframe style="overflow:visible; width:400px; height:400px;" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="yourfile.html"></iframe>

и это должно быть так, как я тестировал.

Если это не помогло, обновите Chrome до последней версии. :)

...