JSFiddle - React, Tailwind, and code Playground

by jstoudt

HTML

<div class="scrollpane">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam felis nisl, placerat eget malesuada nec, consequat eu sem. Proin a lectus at leo varius iaculis in at lacus. Integer elementum pellentesque nisl, in fermentum purus faucibus et. Proin ut nisl risus. Ut sit amet est arcu, sed volutpat neque. Sed lacus nulla, rutrum sed accumsan eu, aliquam et magna. Donec leo sapien, congue at vehicula vitae, pharetra sed dui.</p>
	<p>Proin sit amet felis at sapien tempor rutrum in in nulla. Donec eu magna magna, in mattis enim. In lacinia massa vulputate nisl rutrum vitae aliquet magna tincidunt. Cras rutrum arcu vitae justo dictum ac imperdiet orci dictum. Sed a velit diam. Proin consectetur sollicitudin massa, non vestibulum justo pretium at. Suspendisse at ipsum eu felis vulputate luctus a vel turpis. Sed lacus tortor, tincidunt sed faucibus non, tempus quis sem. Nam lectus eros, adipiscing sit amet condimentum vel, auctor ac elit. Nam tortor augue, tristique id venenatis sit amet, scelerisque non mi. Proin viverra tincidunt justo sit amet pulvinar. Etiam euismod lacus sed nisl convallis dignissim. In at metus non sapien pulvinar sagittis sit amet in arcu.</p>

	<p>Cras ac neque dui. Ut sit amet dui eros, a dictum tortor. Suspendisse hendrerit, elit et pretium dictum, risus lacus faucibus nisl, aliquam sodales risus diam non sem. Duis aliquet massa enim. Fusce consequat tempus justo vitae rutrum. Aliquam euismod lacinia magna eget ultrices. Maecenas vestibulum eros eget elit pellentesque venenatis. Phasellus dictum leo nec enim ultrices dignissim.</p>

	<p>Quisque arcu velit, tempor a ultricies consequat, posuere ac purus. Vestibulum eu tristique lacus. Suspendisse feugiat est vel elit pharetra vel tempus quam ullamcorper. Nulla luctus tincidunt dui, eu ultrices massa malesuada eget. Cras imperdiet imperdiet nibh, id rhoncus lacus consectetur at. Nulla varius dolor posuere massa lobortis vestibulum. Class aptent taciti sociosqu ad...

CSS

.scrollpane {
    width: 400px;
    height: 400px;
    padding: 5px;
    border: 1px solid #000;
    overflow: auto;
    outline: 0;
}

p {
    border: 1px solid #00f;
}

JavaScript

// https://code.google.com/p/chromium/issues/detail?id=121602

var e = document.querySelector('.scrollpane');

(function toggleOverflow() {
    e.style.overflow = e.style.overflow === 'auto' ? 'hidden' : 'auto';
    setTimeout(toggleOverflow, 1500);
}());