css

Why can’t I change the scroll bar style of iframe in vue?

petalsonawet

PetalsOnaWet

Posted on February 1, 2024

Why can’t I change the scroll bar style of iframe in vue?

html:

<div class="basicInfo" v-if="currentTab !=3">



              <iframe width="100%" height="1116px" :src="url" frameborder="0" ref="myIframe" class="iframe"></iframe>


          </div>
Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

its Not working

💖 💪 🙅 🚩
petalsonawet
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.

Related