Horizontal Website

horizontal-website.markdown

Horizontal Website

A Pen by Captain Anonymous on CodePen.

License.

index.html

<main style="overflow: scroll hidden;">
  <div class="wrapper" >
    <div style="background-color:red"></div>
<div style="background-color:blue"></div>
  </div>
</main>

script.js

var item = document.getElementsByTagName('MAIN')[0];

window.addEventListener('wheel', function(e) {

  if (e.deltaY > 0) item.scrollLeft += 100;
  else item.scrollLeft -= 100;
});

style.css

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;
}