CSS3 HandsOn - Scroll Bar-Create a CSS Scroll bar as shown in the image above. Please try to recreate the same thing as visually similar as possible

1. CSS3 HandsOn-Scroll Bar

Create a CSS Scroll bar as shown in the image above.

Please try to recreate the same thing as visually similar as possible

Answer

copy as same as

Style.css

.container::-webkit-scrollbar {

    background-color:#fff;

    width:13px

}

.container::-webkit-scrollbar-track {

  box-shadow: inset 0 0 6px rgba(0,0,0,0.1);

  background-color: green;

  border-radius: 10px;

}

.container::-webkit-scrollbar-thumb {

  border-radius: 10px;

  box-shadow: inset 0 0 6px green;

  background-color: #555555;

}

.container {

    height: 200px;

    width: 300px;

    min-width: 150px;

    background: #fff;

    margin: auto auto auto auto;

    overflow-x: scroll;

    overflow-y: scroll;

}

.overflow{

    min-width: 350px;

    min-height:250px;

}

html{

    width: 100%;

    height: 100%;

    display: flex;

}

body{

    display: flex;

    margin: auto auto auto auto;

    font-size:22px;

    font-weight:600;

    font-family: comic sans ms;

}

Click on Image: