Online Html Editor

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scrollbar Styling Example</title> <style> /* Container style */ #scrollContainer { width: 300px; height: 200px; overflow: auto; padding: 10px; border: 1px solid #333; scrollbar-color: #1e90ff #f0f0f0; /* Thumb color, Track color */ scrollbar-width: thin; /* Width of the scrollbar */ scrollbar-gutter: stable; /* Ensures scrollbar space is reserved */ } /* Adding content to scroll */ #scrollContainer p { margin: 0; line-height: 1.6; } </style> </head> <body> <h1>scrollbar-color/width/gutter properties</h2> <div id="scrollContainer"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac enim sit amet dolor sagittis condimentum...</p> <p>Vestibulum vehicula, eros at lobortis convallis, elit felis malesuada leo, ut interdum eros ligula a urna...</p> <p>Mauris in erat nec felis auctor tristique. Suspendisse potenti. Donec ut lacus ut risus fermentum finibus...</p> <p>Curabitur imperdiet arcu sit amet dolor efficitur, vel fringilla justo fermentum. Nam interdum venenatis justo...</p> </div> </body> </html>