JSFiddle - React, Tailwind, and code Playground

HTML

<div class="canScroll">1</div><div class="canScroll">2</div><div class="canScroll">3 <section><span></span></section></div><div class="canScroll">4</div><div class="canScroll">5</div>

CSS

html, body {margin:0;height:100%;}
			body {white-space:nowrap;}
			div {display:inline-block;vertical-align:top;box-sizing:border-box;width:100%;height:100%;background:#e7e7e7;border-right:5px solid #333;}
			div {position:relative;text-align:center;font:700 5em sans-serif;}
			section {position:absolute;width:200px;height:200px;overflow:auto;top:0;background:#fff;}
			span {display:block;height:1000px;}

JavaScript

function scrolled(e){
	if (e.target.className != "canScroll") return;
	window.scroll(window.pageXOffset + (e.detail > 0 ? 80 : -80),0);
}

window.addEventListener("DOMMouseScroll", scrolled, false);