如何让CSS -webkit-scrollbar样式在HTML object标签上生效

问题原因 #

<object> 标签加载的外部HTML属于独立的浏览上下文，父页面的CSS规则无法穿透作用到子页面内部，你在父页面为object元素添加的::-webkit-scrollbar系列样式，只能作用于object元素本身，而真正触发滚动的是object内部加载的_details.html页面，所以自定义样式不生效。

解决方案 #

方案1：子页面内添加滚动条样式（推荐，兼容性最好）

1. 修改父页面index.html的object样式，隐藏外层默认滚动条，删除针对object的滚动条自定义规则：

object {
    overflow: hidden; /* 替换原有的overflow: scroll */
    width: 300px;
    height: 300px;
    border: green solid;
}
/* 原object::-webkit-scrollbar系列规则全部删除 */

2. 在子页面_details.html内添加自定义滚动条样式：

<html>
<head>
    <style>
        ::-webkit-scrollbar {
            width: 20px;
        }
        ::-webkit-scrollbar-track {
            background-color: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background-color: #f50000;
            border-radius: 20px;
            border: 6px solid transparent;
            background-clip: content-box;
        }
        ::-webkit-scrollbar-thumb:hover {
            background-color: #1100ff;
        }
    </style>
</head>
<body>
    <h1>content</h1>
    <br>
    <h1>content</h1>
    <br>
    <h1>content</h1>
    <br>
    <h1>content</h1>
</body>
</html>

方案2：子页面内容嵌入父页面（适合无法修改子页面源码的场景）

不用object标签，直接请求_details.html的内容插入到父页面的容器中，就可以直接用父页面的样式控制滚动条：

<!-- index.html body部分 -->
<div id="_details" style="overflow: scroll;width: 300px;height:300px;border: green solid;">
</div>
<script>
fetch('_details.html')
.then(res => res.text())
.then(html => {
    document.getElementById('_details').innerHTML = html;
})
</script>

给容器添加滚动条样式即可：

#_details::-webkit-scrollbar {
    width: 20px;
}
#_details::-webkit-scrollbar-track {
    background-color: transparent;
}
#_details::-webkit-scrollbar-thumb {
    background-color: #f50000;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}
#_details::-webkit-scrollbar-thumb:hover {
    background-color: #1100ff;
}

内容的提问来源于stack exchange，提问作者MB41