如何修改 iframe 滚动条样式

发布于
2017-12-04

项目中用到了 iframe，由于显示效果，想要修改一下滚动条样式，通过修改 css 样式在 chrome 下无效，而在 safari 中显示正常，不知道什么原因，求大佬们指点

写了个测试代码：
index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /*- scrollbar -*/
        ::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }
        ::-webkit-scrollbar-thumb{
            background-color: #999;
            -webkit-border-radius: 5px;
            border-radius: 5px;
        }
        ::-webkit-scrollbar-thumb:vertical:hover{
            background-color: #666;
        }
        ::-webkit-scrollbar-thumb:vertical:active{
            background-color: #333;
        }
        ::-webkit-scrollbar-button{
            display: none;
        }
        ::-webkit-scrollbar-track{
            background-color: #f1f1f1;
        }
        /*- scrollbar -*/
        body, html, #iframe {
            width: 640px;
            height: 100%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <iframe id="iframe" scrolling="auto" frameborder="0" src="./inner.html"></iframe>
</body>
</html>

inner.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerHtml</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .innerDiv {
            width: 100%;
            height: 2000px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div class="innerDiv"></div>
</body>
</html>

附上效果截图：
Chrome：
图片描述

Safari：
图片描述

chrome 下 iframe 滚动条样式与 body 滚动条样式不同，而 safari 下 iframe 滚动条样式和 body 滚动条样式皆正常。求大佬们指点

iframe

阅读 27.2k

2 个回答

得票最新

风中的雪糕

5181520

发布于
2017-12-04

✓ 已被采纳

你试着把这个样式在inner里放一份看看

小萨

发布于
2019-04-15

新手上路，请多包涵

Chrome下用下面的试试
`<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    /*- scrollbar -*/
    body{ 
        SCROLLBAR-FACE-COLOR:#ff0198;   /*滚动条凸出部分的颜色*/ 
        SCROLLBAR-HIGHLIGHT-COLOR:#ff0198;/*滚动条空白部分的颜色 */
        SCROLLBAR-SHADOW-COLOR:#ff0000;/*立体滚动条阴影的颜色 */
        SCROLLBAR-3DLIGHT-COLOR:#ff0198;/*滚动条亮边的颜色 */
        SCROLLBAR-ARROW-COLOR:#ffffff;/*上下按钮上三角箭头的颜色*/ 
        SCROLLBAR-TRACK-COLOR:#ffffff;/*滚动条的背景颜色 */
        SCROLLBAR-BASE-COLOR:#ff0198/*滚动条的基本颜色 */
        
        }
    /*- scrollbar -*/
    body, html, #iframe {
        width: 640px;
        height: 100%;
        margin: 0 auto;
    }
</style>

</head>
<body>

<iframe id="iframe" scrolling="auto" frameborder="0" src="./inner.html"></iframe>

</body>
</html>`

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进