DEV Community

Alison Bennett
Alison Bennett

Posted on

How to Create Scrolling Y Text With HTML + CSS

Image description
We’ll be using CSS animations paired with the transform: translateX and / or transformY

Please add the folowing css to your css file.

.scroll {
overflow-y: scroll;

.scroll::-webkit-scrollbar {
  width: 12px; 
.scroll::-webkit-scrollbar-track {
  background: #63a991; 
    border-radius: 20px; 
.scroll::-webkit-scrollbar-thumb {
  background-color: rgba(0,199,210,1);
  border-radius: 20px; 
  border: 3px solid orange; 
Enter fullscreen mode Exit fullscreen mode

Also you need to neast you text in

Your great text
<div class="scroll"> Your great text</div>
Enter fullscreen mode Exit fullscreen mode

The result you can see at at the page's footer

Top comments (1)

p_avramenko profile image
Павел Авраменко

cool solution