Iframe - только вертикальная прокрутка

Question

У меня есть iframe.

Мне нужно кросс-браузерное решение, чтобы гарантировать, что видна только вертикальная полоса прокрутки, независимо от ширины содержимого iframe.

Мое решение уже зависит от jQuery, так что если этоневозможно только с помощью CSS. Я открыт для решений jQuery.

Как я могу это сделать?

Answer 1

Вы можете настроить полосы прокрутки для iframe или любого элемента с помощью следующего кода CSS:

iframe{ width:500px; height: 500px; overflow-x: hidden; overflow-y: scroll }

Answer 2

Чтобы отображать только вертикальную полосу прокрутки в iframe, вы указываете, что ширина iframe больше ширины страницы внутри iframe.

<iframe src="#" width="--" height="250">
  <p>Your browser does not support iframes.</p>
</iframe>

Или попробуйте это:

<style>
    #scroll-box {
        background:#e6e6e6;
        width:150px;
        height: 150px;
        padding:15px;
        overflow-y: scroll
    }
</style>

<iframe id="scroll-box">
    <h3>Lorem ipsum dolor sit amet</h3>     
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</iframe>   

Answer 3

Вложенность ...

Поместите <div> на страницу, которая загружается в пределах <iframe>, и вы можете управлять свитками.

<iframe  scrolling="no" height="400" width="600" >
<div id="addcontent" style='width:600px;overflow-y:scroll;overflow-x:hidden;height:400px;position:relative;top:0px;left:0px;'>
</div>
</iframe>

Answer 4

это работает для меня (даже на сафари тоже):

<iframe src="http://url/file.html" frameborder="0" style="overflow-y:scroll !important; overflow-x:hidden !important; overflow:hidden;height:100%;width:100%;" scrolling="yes"></iframe>

Или вы можете сделать это тоже:

CSS

iframe {
    overflow-y:scroll !important;
    overflow-x:hidden !important;
    overflow:hidden;
    height:100%; /* optional */
    width:100%; /* optional */
    border:none; /* optional */
}

HTML

<iframe src="http://url/file.html" scrolling="yes"></iframe>

* src (http://url/file.html), должен указывать на действительный URL-адрес и файл HTML.