admin 管理员组

文章数量: 887044


2024年1月6日发(作者:bowed)

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 的滚动条样式了。注意,以上样式在不同浏览器可能会有些差异,需要根据浏览器的不同进行调整。


本文标签: 浏览器 样式 差异