body {
background: whitesmoke;
}
#wrapper {
width: 150px;
height: 150px;
margin: 2em auto;
box-shadow: 0 0 15px 5px #ccc;
}
#scroller {
display: block;
width: 100%;
height: 100%;
}
#content {
display: block;
width: 300px;
height: auto;
padding: 5px;
}
#scroller {
border-color: rgba(0, 0, 0, 0.0);
transition: border-color 0.75s linear;
overflow: auto;
}
#scroller:hover {
border-color: rgba(0, 0, 0, 0.1);
transition: border-color 0.125s linear;
}
#scroller::-webkit-scrollbar,
#scroller::-webkit-scrollbar-thumb,
#scroller::-webkit-scrollbar-corner {
border-right-style: inset;
border-right-width: calc(100vw + 100vh);
border-color: inherit;
}
#scroller::-webkit-scrollbar {
width: 0.5rem;
height: 0.5rem;
}
#scroller::-webkit-scrollbar-thumb {
border-color: rgba(0, 0, 0, 0.1);
}
#scroller::-webkit-scrollbar-thumb:hover {
border-color: rgba(0, 0, 0, 0.15);
}
#scroller::-webkit-scrollbar-thumb:active {
border-color: rgba(0, 0, 0, 0.2);
}
<div id="wrapper">
<div id="scroller">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pretium mi felis, pharetra ornare lorem pellentesque pulvinar. Donec varius condimentum nunc at mollis. Pellentesque posuere et quam eu tristique. Integer interdum enim non interdum mattis. Suspendisse gravida nibh enim, non efficitur lacus suscipit quis. Etiam pharetra libero auctor ultricies ornare. Duis dapibus semper semper. Nam sit amet lobortis arcu.
Maecenas fermentum risus quis justo convallis, non ornare erat fringilla. Cras eleifend leo sapien, ac iaculis orci ultricies sed. Praesent ultrices accumsan risus, pharetra pharetra lorem dignissim id. Aenean laoreet fringilla eros, vel luctus eros luctus sed. Nullam fermentum massa sit amet arcu dictum, nec bibendum lectus porta. Duis pellentesque dui sed nisi ultricies, vitae feugiat dui accumsan. Nam sollicitudin, ex et viverra ultricies, justo metus porttitor quam, quis vestibulum nibh nisl eget leo.
Integer luctus arcu et sapien accumsan fringilla. Integer mollis tellus vel imperdiet elementum. Ut consequat ac nibh ac sagittis. Duis neque purus, pellentesque nec erat id, pharetra ornare sapien. Etiam volutpat tincidunt nunc ac facilisis. Aenean sed purus pellentesque, vehicula mauris porta, fringilla nibh. Ut placerat, risus et congue rutrum, lorem arcu aliquet urna, sollicitudin venenatis lorem eros et diam. Aliquam sodales ex risus, ac vulputate ipsum porttitor vel. Pellentesque mattis nibh orci. Morbi turpis nulla, tincidunt vitae tincidunt in, sodales et arcu. Nam tincidunt orci id sapien venenatis porttitor ut eu ipsum. Curabitur turpis sapien, accumsan eget risus et, congue suscipit ligula.
Maecenas felis quam, ultrices ac ornare nec, blandit at leo. Integer dapibus bibendum lectus. Donec pretium vehicula velit. Etiam eu cursus ligula. Nam rhoncus diam lacus, id tincidunt dui consequat id. Ut eget auctor massa, quis laoreet risus. Nunc blandit sapien non massa bibendum, ac auctor quam pellentesque. Quisque ultricies, est vitae pharetra hendrerit, elit enim interdum odio, eu malesuada nibh nulla a nisi. Ut quam tortor, feugiat sit amet malesuada eu, viverra in neque. Nullam lacinia justo sit amet porta interdum. Etiam enim orci, rutrum sit amet neque non, finibus elementum magna. Sed ac felis quis nunc fermentum suscipit.
Ut aliquam placerat nulla eget aliquam. Phasellus sed purus mi. Morbi tincidunt est dictum, faucibus orci in, lobortis eros. Etiam sed viverra metus, non vehicula ex. Sed consectetur sodales felis, vel ultrices risus laoreet eget. Morbi ut eleifend lacus, ac accumsan risus. Donec iaculis ex nec ante efficitur vestibulum.
</div>
</div>
</div>