<div id="container"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> </div> <!-- const element = document.querySelector("#container"); element.addEventListener('wheel', (event) => { event.preventDefault(); element.scrollBy({ left: event.deltaY < 0 ? -30 : 30, }); }); --> <!-- #container { display: flex; overflow-x: scroll; max-width: 50rem; margin: 0 auto; } #container p { font-family: sans-serif; border-radius: 8px; background: #ff6961; color: white; padding: 2rem 3rem; margin: 2rem 1rem; } -->
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter