iframe - 仅垂直滚动

sma*_*man 7 css iframe cross-browser scrollbar browser-scrollbars

我有一个iframe.

我需要一个跨浏览器的解决方案,以确保只有垂直滚动条可见,无论iframe内容的宽度如何.

我的解决方案已经依赖于jQuery,所以如果仅使用CSS不可能,那么我对jQuery解决方案持开放态度.

我怎样才能做到这一点?

Has*_*anG 12

您可以使用以下css代码调整iframe或任何元素的滚动条:

iframe{ width:500px; height: 500px; overflow-x: hidden; overflow-y: scroll }
Run Code Online (Sandbox Code Playgroud)

  • 这对我来说无法通过src attrib加载外部iFrame (13认同)

小智 6

要仅显示iframe中的垂直滚动条,请指定iframe的宽度大于iframe内页面的宽度.

<iframe src="#" width="--" height="250">
  <p>Your browser does not support iframes.</p>
</iframe>
Run Code Online (Sandbox Code Playgroud)

或试试这个:

<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>   
Run Code Online (Sandbox Code Playgroud)