Why can’t I change the scroll bar style of iframe in vue?
PetalsOnaWet
Posted on February 1, 2024
html:
<div class="basicInfo" v-if="currentTab !=3">
<iframe width="100%" height="1116px" :src="url" frameborder="0" ref="myIframe" class="iframe"></iframe>
</div>
css:
iframe::-webkit-scrollbar-track {
border-radius: 10px!important;
// -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
}
iframe::-webkit-scrollbar-thumb {
background-color: rgba(144, 147, 153, .3)!important;
border-radius: 10px!important;
// -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
iframe::-webkit-scrollbar {
width: 16px!important;
height: 16px!important;
}
iframe::-webkit-scrollbar-track,
iframe::-webkit-scrollbar-thumb {
border-radius: 999px!important;
border: 5px solid transparent!important;
}
iframe::-webkit-scrollbar-track {
// box-shadow: 1px 1px 5px rgba(0, 0, 0, .2) inset;
}
iframe::-webkit-scrollbar-thumb {
min-height: 20px!important;
background-clip: content-box!important;
// box-shadow: 0 0 0 5px rgba(0, 0, 0, .2) inset;
}
iframe::-webkit-scrollbar-corner {
background: transparent!important;
}
its Not working
💖 💪 🙅 🚩
PetalsOnaWet
Posted on February 1, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.