Scrollbal inside div styled

In this example below you will see how to do a Scrollbal inside div styled with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Smakosh, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Smakosh ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Scrollbal inside div  styled</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="container">
  <div class="scroll">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</p>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Smakosh/scrollbal-inside-div-styled-YQKeME */
@import url("https://fonts.googleapis.com/css?family=Roboto");
body {
  padding: 0;
  margin: 0;
}

.container {
  max-width: 1200px;
  width: 80%;
  margin: 0 auto;
  height: 100vh;
  font-family: "Roboto";
}
.container .scroll {
  max-width: 22%;
  margin: 0 auto;
  position: relative;
  border-radius: 5px;
  top: 45%;
  max-height: 40%;
  overflow-Y: scroll;
  transform: translateY(-50%);
  background: #fff;
  padding: 2rem 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.container .scroll:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.container .scroll::-webkit-scrollbar {
  background-color: #EDF0F5;
  width: 6px;
  border-radius: 16px;
}
.container .scroll::-webkit-scrollbar:hover {
  background-color: #EDF0F5;
}
.container .scroll::-webkit-scrollbar-thumb {
  background-color: #212121;
  border-radius: 16px;
}
.container .scroll::-webkit-scrollbar-thumb:hover {
  background-color: #545454;
}

Comments