web-dev-qa-db-ja.com

Iframe-垂直スクロールのみ

私はiframeを持っています。

Iframeのコンテンツの幅に関係なく、垂直スクロールバーのみが表示されるようにするには、クロスブラウザーソリューションが必要です。

私のソリューションはすでにjQueryに依存しているので、CSSだけではこれが不可能な場合は、jQueryソリューションを利用できます。

これどうやってするの？

cssiframecross-browserscrollbarbrowser-scrollbars
7
smartcaveman

次のCSSコードを使用して、iframeまたは任意の要素のスクロールバーを調整できます。

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

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>
6
mgreen

ネスティング...

<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>
3
Gary Hayes

これは私にとってはうまくいきます（サファリでも）：

<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ファイルを指す必要があります。

1
sputn1k