在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/網(wǎng)絡安全  HTML/ 如何修改 iframe 滾動條樣式

如何修改 iframe 滾動條樣式

項目中用到了 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 滾動條樣式皆正常。求大佬們指點

回答
編輯回答
巴扎嘿

你試著把這個樣式 在inner里放一份看看

2017年9月6日 23:13