2024年4月26日发(作者：)

vue中iframe的滚动条样式

在 Vue 中，可以使用以下 CSS 样式来设置 iframe 的滚动条样式：

css

/* 隐藏 iframe 的默认滚动条 */

iframe::-webkit-scrollbar {

display: none;

}

/* 自定义滚动条样式 */

iframe {

scrollbar-color: #d4d4d4 transparent;

scrollbar-width: thin;

}

/* 鼠标悬浮在滚动条上时的颜色 */

iframe::-webkit-scrollbar-thumb:hover {

background-color: #d4d4d4;

}

/* 自定义滚动条轨道的样式 */

iframe::-webkit-scrollbar-track {

background: transparent;

}

iframe::-webkit-scrollbar-track-piece {

background-color: #f2f2f2;

}

这样，就可以自定义 iframe 的滚动条样式了。注意，以上样式在不同浏览器可

能会有些差异，需要根据浏览器的不同进行调整。