Agregar estilos a la barra de scroll

Este es un ejemplo de cómo agregar estilos a la barra de scroll con CSS tal y como se ve a continuación.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel libero eleifend, commodo lacus mattis, viverra nisl. Pellentesque sit amet lorem at justo mollis porttitor. Aliquam mollis est nisi, vitae efficitur lorem iaculis at. Pellentesque placerat, tellus facilisis fringilla auctor, arcu lorem imperdiet tortor, eu mollis turpis dui convallis sapien. Fusce lacinia velit ut ligula faucibus sodales. Nunc quis ullamcorper sem, id accumsan odio. Mauris nec semper velit. Pellentesque laoreet turpis sed augue sagittis, vitae semper tellus ornare. Cras sit amet dolor sollicitudin, sagittis lectus maximus, semper velit. Nulla egestas enim id condimentum laoreet. Nullam quis massa non nunc ultrices fringilla ac quis dolor. Pellentesque consequat ex est, quis tempor libero rhoncus nec. Pellentesque facilisis porta est, non malesuada enim finibus quis. Etiam gravida felis tincidunt ante posuere dictum. Mauris sit amet lacus suscipit, dapibus dui at, vehicula ante. Vestibulum ut dolor placerat erat imperdiet ullamcorper et nec velit. Sed varius rhoncus neque eu pellentesque. Donec efficitur ultricies sodales. Mauris maximus sit amet erat vitae vestibulum. Vestibulum gravida viverra aliquet. Nam nisl quam, lobortis et pretium nec, efficitur eu tortor. Proin volutpat nisl nulla, sit amet varius lacus faucibus non. Quisque ullamcorper nulla congue est imperdiet suscipit. Sed at urna ut diam sodales dictum. Etiam tincidunt bibendum magna ac gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse tincidunt diam vitae dapibus consequat. Fusce purus ligula, malesuada at ligula sit amet, interdum hendrerit orci. Nunc suscipit hendrerit porttitor. Nullam nisl neque, mattis nec ullamcorper sit amet, suscipit at quam. In hac habitasse platea dictumst. Sed elit nisl, facilisis sit amet erat quis, imperdiet condimentum eros. Vestibulum nec accumsan magna, at vulputate sem. Phasellus molestie tellus porttitor lacus mattis pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper volutpat ligula vel sollicitudin. Curabitur tincidunt, lorem et tempor blandit, ipsum diam dapibus urna, et egestas nulla nunc sed metus.

Este ejemplo se construye a partir de un contenedor que en este caso será un párrafo largo con la clase «text_scroll». Utilizaremos un alto máximo que en este caso es «150px» y las siguientes líneas de CSS

<p class="text_scroll"> Lorem ipsum...(Texto largo) </p>

<style>
    .text_scroll {
        width: 100%; /* Ajusta el ancho según tus necesidades */
        height: 150px; /* Ajusta la altura según tus necesidades */
        overflow-y: auto; /* Habilita el scroll vertical */
        overflow-x: hidden; /* Deshabilita el scroll horizontal */
        border-radius: 10px; /* Bordes redondeados */
        padding: 10px; /* Espacio interno para que el texto no quede pegado a los bordes */
        background-color: #0b1120; /* Color de fondo */
    }

    .text_scroll::-webkit-scrollbar {
        width: 10px; /* Ancho del scroll */
    }

    .text_scroll::-webkit-scrollbar-thumb {
        background-color: #151823; /* Color de la barra de scroll */
        border-radius: 10px; /* Bordes redondeados */
    }

    .text_scroll::-webkit-scrollbar-track {
        background-color: #34394d; /* Color de fondo */
        border-radius: 10px; /* Bordes redondeados */
    }
</style>