Skip to content

Instantly share code, notes, and snippets.

@davidbwaters
Created September 28, 2020 21:08
Show Gist options
  • Save davidbwaters/3525db57f297c9d709adc3f5009068db to your computer and use it in GitHub Desktop.
Save davidbwaters/3525db57f297c9d709adc3f5009068db to your computer and use it in GitHub Desktop.
Horizontal Website
<main style="overflow: scroll hidden;">
<div class="wrapper" >
<div style="background-color:red"></div>
<div style="background-color:blue"></div>
</div>
</main>
var item = document.getElementsByTagName('MAIN')[0];
window.addEventListener('wheel', function(e) {
if (e.deltaY > 0) item.scrollLeft += 100;
else item.scrollLeft -= 100;
});
body{
padding:0;
margin:0;
}
main {
position: relative;
width: 100vw;
height: 100vh;
-webkit-overflow-scrolling: touch;
}
.wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: nowrap;
width: auto;
}
.wrapper > div {
pointer-events: none;
flex: 0 0 auto;
width: 100vw;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment