<div style="height: 100vh; width: 100vw;" class="br">
  <p> Scroll </p>
</div> <!--Just extra div for scrolling space-->


  <div class="sticky-parent">
    <div class="sticky">
      <div class="horizontal"> <!--Horizantal conatiner with display flex-->

        <!--Content Start-->
        <div class="dim" style="background-color: aqua;"></div>
        <div class="dim" style="background-color: rgb(255, 238, 0);"></div>
        <div class="dim" style="background-color: rgb(81, 255, 0);"></div>
        <div class="dim" style="background-color: rgb(247, 0, 255);"></div>
        <div class="dim" style="background-color: rgb(27, 24, 179);"></div>
        <div class="dim" style="background-color:black"></div>
        <!--Content End-->

      </div>
    </div>
  </div>
  <div style="height: 100vh; width: 100vw;""></div> <!--Extra Scroll Space-->
.sticky-parent{
  height: 700vh;
}
.sticky{
  position: sticky;
  top: 0px;
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
}
.dim{
  display: block;
  min-width: 50vw;
  height: 100vh;
}
.horizontal{
  display: flex;
}
.br{
  outline: solid;
}

@media (max-width: 620px) {
  .dim{
    display: block;
    min-width: 100vw;
    height: 100vh;
  }
}

p{
  font-size: 10em;
  text-align: center;
}
"use strict"

// Adding scroll event listener
document.addEventListener('scroll', horizontalScroll);

//Selecting Elements
let sticky = document.querySelector('.sticky');
let stickyParent = document.querySelector('.sticky-parent');

let scrollWidth = sticky.scrollWidth;
let verticalScrollHeight = stickyParent.getBoundingClientRect().height-sticky.getBoundingClientRect().height;

//Scroll function 
function horizontalScroll(){

    //Checking whether the sticky element has entered into view or not
    let stickyPosition = sticky.getBoundingClientRect().top;
    if(stickyPosition > 1){
        return;
    }else{
        let scrolled = stickyParent.getBoundingClientRect().top; //how much is scrolled?
        sticky.scrollLeft =(scrollWidth/verticalScrollHeight)*(-scrolled)*0.85;
    
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.