JSFiddle - React, Tailwind, and code Playground

by masmiguel

HTML

<div class="myautoscroll">
            <p>
            This is a test for the stackoverflow question
            <a href="http://stackoverflow.com/questions/10015389/">autohide scrollbars when overflow is auto</a>
            </p>

            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus tincidunt
            odio sit amet eleifend. Nullam mattis posuere est, ut hendrerit ipsum ultrices
            non. Aliquam erat volutpat. Aliquam hendrerit, odio at euismod fermentum, arcu
            nunc sagittis enim, eget malesuada nulla risus rhoncus massa. In in varius
            metus. Mauris consequat leo a sem pretium sodales. Cras facilisis porttitor
            ultrices. Sed ipsum metus, luctus sit amet blandit at, facilisis vel mauris.
            Morbi leo turpis, congue dignissim imperdiet eu, laoreet mattis turpis. 
            </p>
            <p>
            Etiam eu velit magna, et euismod ligula. Aenean non ligula at tortor accumsan
            blandit eget ut lacus. Vivamus commodo nunc egestas dolor sagittis rutrum
            egestas metus sagittis. Pellentesque mollis eros ut nisl auctor tincidunt. Cras
            ullamcorper ultricies arcu, id tincidunt ligula cursus eget. Ut accumsan, dolor
            et ultricies consequat, urna lacus blandit massa, nec vestibulum sapien sapien
            sed sem. Nunc mattis lorem ornare mauris viverra vel mattis mi euismod. Vivamus
            quis neque massa. Integer at est diam, vel molestie libero. Donec non ipsum non
            mauris posuere auctor. Quisque ac sapien sit amet diam elementum sagittis quis
            et urna. Maecenas adipiscing orci sed dui eleifend bibendum. 
            </p>
            <p>
            Suspendisse massa tortor, sagittis dignissim sodales vitae, porta id lorem.
            Aliquam at enim non libero consequat blandit. Nunc eleifend fermentum diam
            vitae condimentum. Aliquam molestie magna ut purus malesuada a rhoncus...

CSS

div.myautoscroll {
            
            overflow: hidden;
            
        }
        div.myautoscroll:hover {
            overflow: auto;
        }
        div.myautoscroll p {
            padding-right: 16px;
        }
        div.myautoscroll:hover p {
            padding-right: 0px;
        }