How to add Scroll bar style over the line in the page so that its functionality will be same as like scrolling

Description:

Creating a scroll bar on the single line curser moving. Add the following code in the container class and use the border line in webkit-scrollbar-track so that the scroll bar style over the line will be same as like scrolling functionality on single line.

::-webkit-scrollbar
{       
width:10px;   
    height:0px; 
  }       
::-webkit-scrollbar-thumb
{     
  background: transparent; 
      background-color:#707070;     
  border:2px solid transparent;     
  border-radius:10px;     
  background-clip:padding-box; 
  } 
  ::-webkit-scrollbar-thumb:hover
{   
    background-color:transparentize($sc-neutral-shade-500, 1-0.5); 
  } 
  ::-webkit-scrollbar-track
{   
    background-color:transparentize($sc-neutral-shade-500, 1-0.05);     
  background:#a19d9d;   
border-left: 3px solid white;   
border-right: 4px solid white;   
border-top-left-radius: 100px;   
border-bottom-left-radius: 100px;   
margin-top: 15px; 
      }

Leave a comment

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