Code Bug Fix: -webkit-scrollbar-thumb not working in Chrome 81

Original Source Link

I’ve been trying to style some scrollbars in windows using ::webkit-scrollbar-thumb. I can’t get it to work work though. Does anyone know what I’m missing here? I’ve included a test project below – thanks!

.wrapper {
  width: 100px;
  overflow: auto;
}

.wrapper::-webkit-scrollbar-thumb {
  width: 3.125rem;
  background-color: #9ac2cd;
  border: 0.0625rem solid #e27810;
  -webkit-border-radius: 0.375rem;
}
<div class="wrapper">
  <div style="width:1000px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem, blanditiis consectetur consequatur consequuntur culpa cupiditate eius ipsum iste iure libero magni natus nulla numquam officia officiis porro quia rem reprehenderit temporibus
    unde vel veniam? Animi consequatur excepturi facere harum, nam necessitatibus nostrum optio saepe similique totam ut veniam veritatis?</div>
</div>

Figured it out. In order for &::-webkit-scrollbar-thumb to work you must include &::-webkit-scrollbar beforehand on the same element. Otherwise it doesn’t do anything.

You have to include this peace of css code in order to make your horizontal scrollbar work

::-webkit-scrollbar{
width: 12px;
height: 12px;
}

This is how your final result looks like

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    
     ::-webkit-scrollbar{    
        width: 12px;
        height: 12px;
        }
    
    
    .wrapper{
        width:100px;
        overflow-x:auto;
    }


    .wrapper::-webkit-scrollbar-thumb {
      width: 3.125rem;
      background-color : #928a22;
      border: 0.0625rem solid #e27810;
      -webkit-border-radius: 0.375rem;
    }
    </style>
</head>
<body>
    <div class="wrapper">
    <div style="width:1000px;">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem, blanditiis consectetur consequatur consequuntur culpa cupiditate eius ipsum iste iure libero magni natus nulla numquam officia officiis porro quia rem reprehenderit temporibus unde vel veniam? Animi consequatur excepturi facere harum, nam necessitatibus nostrum optio saepe similique totam ut veniam veritatis?   
    </div>
        </div>
</body>
</html>
Tagged : /

Leave a Reply

Your email address will not be published. Required fields are marked *