Webkit Scroll Bar

In this example below you will see how to do a Webkit Scroll Bar with some HTML / CSS and Javascript

Styling webkit scroll bar.Reference: http://css-tricks.com/custom-scrollbars-in-webkit/

Thumbnail
This awesome code was written by bennyzhao, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright bennyzhao ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Webkit Scroll Bar</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 28px;
}

h1 {
  line-height: 1.1;
}

.page {
  margin: 3em auto;
  padding: 0 1em 0;
  max-width: 30em;
  height: 21em;
  overflow-x: hidden;
  overflow-y: scroll;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #e4e4e4;
}

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

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

.attribution {
  font-size: 0.725em;
  font-style: italic;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/bennyzhao/webkit-scroll-bar-aApqJ */
body {
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 28px;
}

h1 {
  line-height: 1.1;
}

.page {
  margin: 3em auto;
  padding: 0 1em 0;
  max-width: 30em;
  height: 21em;
  overflow-x: hidden;
  overflow-y: scroll;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #e4e4e4;
}

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

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

.attribution {
  font-size: 0.725em;
  font-style: italic;
}

Comments