title: scrollTop or scrollLeft on horizontal website?
body: <p>I have a website I am working on (here is a basic <a href="https://codepen.io/caitlinmooneyx/pen/xvgBvY" rel="nofollow noreferrer">example</a>), yesterday I got some help to implement active states on the radio-style button navigation, and I am now trying to link this up so that it also changes on page scroll/when in view as currently it's only onClick.</p>
  
  <p>I roughly know how to achieve this as I've done something similar before, but then it occurred to me that because the page and scrollbar are rotated to accommodate the horizontal effect, I don't know if it would now be scrollTop or scrollLeft. I've never used scrollLeft before so I am unsure how to use it correctly. I am wondering if anyone has implemented something similar before and what the correct way would be? I've tried both and nothing seems to be working. <a href="https://jsfiddle.net/5xx6g7j8/4/" rel="nofollow noreferrer">This</a> is what I'm roughly trying to achieve (but only one class active at a time).</p>
  
  <p>I thought maybe using Waypoints could be another option, but again it's hard to find anything online which explains how this works when a site is rotated multiple times. </p>
  
  <p>My JS knowledge is shaky (still learning!), I'm only trying to implement what I think would work so this is probably not even correct, any help understanding what I'm doing wrong would be appreciated!</p>
  
  <p><a href="https://codepen.io/caitlinmooneyx/pen/xvgBvY" rel="nofollow noreferrer">Heres the latest thing I've tried.</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// --- change span classes on click 
  
  const setIconState = (icon, state) =&gt; icon.className = state
      ? icon.className.replace('button-off', 'button-on')
      : icon.className.replace('button-on', 'button-off')
  
  const toggleIcon = element =&gt; {
    const className = element.className;
    element.className = className.indexOf('button-on') &gt; -1
      ? setIconState(element, false)
      : setIconState(element, true);
  }
  
  const setIconActiveState = (icon, state) =&gt; icon.className = state
    ? icon.className = `${icon.className} active`
    : icon.className = icon.className.replace('active', '')
  
  document.querySelectorAll('.bottomnav span.icon')
    .forEach(icon =&gt; {
      icon.onclick = (e) =&gt; {
        const {
          target: clickedSpan
        } = e;
        
        const siblings = [...clickedSpan.parentElement.parentElement.querySelectorAll('span.icon')]
          .filter(sibling =&gt; sibling != clickedSpan);
  
        siblings.forEach(icon =&gt; {
          setIconState(icon, false);
          setIconActiveState(icon, false);
        });
        setIconState(clickedSpan, true);
        setIconActiveState(clickedSpan, true);
      };
    });
    
  // --- change span classes on scroll test
  
  function onScroll(event){
      var scrollPos = $(document).scrollTop();
      $('.bottomnav a').each(function () {
          var currLink = $(this);
          var refElement = $(currLink.attr("href"));
          if (refElement.position().top &lt;= scrollPos &amp;&amp; refElement.position().top + refElement.height() &gt; scrollPos) {
              $('.bottomnav a span').removeClass("active");
              currLink.addClass("active");
          }
          else{
              currLink.removeClass("active");
          }
      });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      margin: 0;
      padding: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
  
  html,
  body {
      color: #000;
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 100;
      font-size: 7px;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
      scroll-behavior: smooth;
  }
  
  .bottomnav {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      overflow: hidden;
      position: fixed;
      bottom: 0px;
      width: 100%;
      z-index: 2;
  }
  
  .bottomnav span {
      float: left;
      display: block;
      color: #888;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 26px;
  }
  
  .bottomnav span:hover {
      color: #fac123;
  }
  
  .bottomnav span.active {
      color: #fac123;
  }
  
  #container {
      overflow-y: scroll;
      overflow-x: hidden;
      transform: rotate(270deg) translateX(-100vh);
      transform-origin: top left;
      position: absolute;
      width: 100vh;
      height: 100vw;
      white-space: nowrap;
      scroll-snap-type: y mandatory;
  }
  
  #container .card {
      width: 100vw;
      height: 100vh;
      display: inline-flex;
      position: relative;
      scroll-snap-align: start;
  }
  
  #player {
      transform: rotate(90deg) translateY(-100vh);
      transform-origin: top left;
      font-size: 0;
      width: 100vh;
      height: 100vh;
      display: flex;
      /*        position: absolute;*/
  }
  
  #player section &gt; object {
      width: 100vw;
      overflow-x: hidden;
  }
  
  
  section object &gt; div {
      white-space: normal;
  }
  
  .container::-webkit-scrollbar {
      display: none;
  }
  
  section {
        padding: 5%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      position: relative;
      transition: .5s ease;
  }
  
  .cardwhite {
    color: white;
    background-color: black;
  }
  
  .cardblack {
    color: black;
    background-color: white;
  }
  
  h2 {
      font-size: 40px;
      font-weight: 700;
      font-family: 'IBM Plex Serif', sans-serif;
  }
  
  p {
      font-size: 10px;
      margin-bottom: 15px;
      font-weight: 100;
      font-family: 'IBM Plex Sans', sans-serif;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;link href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css" rel="stylesheet"&gt;
  
  &lt;div class="bottomnav" id="bottomnav"&gt;
              &lt;a href="#1"&gt;&lt;span class="icon ion-ios-radio-button-on active"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;a href="#2"&gt;&lt;span class="icon ion-ios-radio-button-off"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;a href="#3"&gt;&lt;span class="icon ion-ios-radio-button-off"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;/div&gt;
  
  &lt;div class="container" id="container"&gt;
          &lt;div id="player"&gt;
         &lt;section class="card cardwhite" id="1"&gt;
                  &lt;object&gt;
                          &lt;h2&gt;Section 1&lt;/h2&gt;
                          &lt;p&gt;Description&lt;/p&gt;
                    
                  &lt;/object&gt;
              &lt;/section&gt;
  
      &lt;section class="card cardblack" id="2"&gt;
                  &lt;object&gt;
                          &lt;h2&gt;Section 2&lt;/h2&gt;
                          &lt;p&gt;Description&lt;/p&gt;
                      
                  &lt;/object&gt;
              &lt;/section&gt;
  
      &lt;section class="card cardwhite" id="3"&gt;
                  &lt;object&gt;
                          &lt;h2&gt;Section 3&lt;/h2&gt;
                          &lt;p&gt;Description&lt;/p&gt;
                   
                  &lt;/object&gt;
              &lt;/section&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>