Question 160967 in Html Question posted in
Some basic documentation can be found here.

' Can’t see HTML scrollbar color or ‘thin’ scrollable?

.poem {
  overflow: scroll;
  scrollbar-color: red orange;
  scrollbar-width: thin;
  white-space: wrap;
  height: 140px;
  width: 140px;
}
<p class="poem">abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz
  abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz
  abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz </p>

As per MDN-Scrollable Link I can’t see the thin scrollbar with a red thumb and an orange track so in my EDGE Version 113 browser I tried out the code snippet, but I can’t see the thin scrollbar with a red thumb and an orange track in my EDGE Browser also. Please help my code error if any.

Tags:

3

Answers


  1. 0

    You are doing everything correct, it’s just that the scrollbar-color property is not well supported in all browsers. Basically only Firefox supports this. Open this question in Firefox and your demo works as expected.

    You can check out the browser support for this property on this page at the bottom: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color

    Login or Signup to reply.
  2. 0

    the syntax is correct it just doesnt support your browser. scrollbar-color: red orange; scrollbar-width: thin; supports only firefox. try using

    ::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
    Login or Signup to reply.
  3. 0

    This is a way to style the scrollbar of the element. Try this:-

    .poem {
  overflow: scroll;
  white-space: wrap;
  height: 140px;
  width: 140px;
}

.poem::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}

.poem::-webkit-scrollbar-thumb{
  background-color: red; 
}

.poem::-webkit-scrollbar-track{background-color: orange;}
    <p class="poem">abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz
  abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz
  abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz </p>

    According to the MDN Web Docs:-

    "::-webkit-scrollbar is only available in Blink- and WebKit-based browsers"

    You can see ::-webkit-scrollbar has good browser support:-

    https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar#browser_compatibility

    For scrollbar-color, the browser support is poor:-

    https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility

    Hope it will be helpful.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search