JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

HTML

<div class="channelWrapper">
  <div class="header">
    <div class="weekdays">Sun</div>
  </div>
  <div class="channels">
    <span class="channel">Channel 1</span>
    <span class="channel">Channel 1</span>
    <span class="channel">Channel 1</span>
    <span class="channel">Channel 1</span>
    <span class="channel">Channel 1</span>
    <span class="channel">Channel 1</span>
    <span class="channel">Channel 1</span>
    <span class="channel">Channel 1</span>
    <span class="channel">Channel 1</span>
    <span class="channel">Channel 1</span>
    <span class="channel">Channel 1</span>
    <span class="channel">Channel 1</span>
    <span class="channel">Channel 1</span>
    <span class="channel">Channel 1</span>
  </div>
</div>
<div class="showsWrapper">
  <div class="row">
    <div class="header">
      <span class="time">9:00AM</span>
      <span class="time">9:30AM</span>
      <span class="time">10:00AM</span>
      <span class="time">10:30AM</span>
      <span class="time">11:00AM</span>
      <span class="time">11:30AM</span>
      <span class="time">12:00PM</span>
      <span class="time">12:00PM</span>
      <span class="time">12:00PM</span>
      <span class="time">12:00PM</span>
      <span class="time">12:00PM</span>
    </div>
  </div>
  <div class="guides">
    <div class="show_row">
      <span class="show">Show 1</span>
      <span class="show">Show 2</span>
      <span class="show">Show 3</span>
      <span class="show">Show 4</span>
      <span class="show">Show 5</span>
      <span class="show">Show 6</span>
      <span class="show">Show 7</span>
      <span class="show">Show 8</span>
      <span class="show">Show 9</span>
      <span class="show">Show 10</span>
      <span class="show">Show 11</span>
      <span class="show">Show 12</span>
    </div>
    <div class="show_row">
      <span class="show">Show 1</span>
      <span class="show">Show 2</span>
      <span class="show">Show 3</span>
      <span class="show">Show 4</span>
      <span...

SCSS

.channelWrapper {
  display: block;
  float: left;
  width: 200px;
  height: 415px;
  background: #ccc;
}

.channels {
  overflow-y: auto;
  height: 365px;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    display: none;
  }
  .channel {
    width: 100%;
    display: block;
    padding: 15px;
    height: 50px;
    box-sizing: border-box;
    text-align: center;
  }
}

.showsWrapper {
  display: block;
  float: left;
  width: calc(100% - 200px);
  height: 415px;
  .row {
    display: inline-flex;
    width: 100%;
    overflow: overlay;
  }
  .guides {
    height: calc(100% - 50px);
    overflow: auto;
    .show_row {
      display: inline-flex;
      overflow: auto;
      .show {
        width: 200px;
        float: left;
        height: 50px;
        background: #666;
        padding: 15px;
        box-sizing: border-box;
        text-align: center;
      }
    }
  }
}

.header {
  display: inline-flex;
  background: #ccc;
  height: 50px;
  .time,
  .weekdays {
    width: 200px;
    padding: 15px;
    text-align: center;
    box-sizing: border-box;
    &.active {}
  }
}

JavaScript

const guides = document.querySelector(".guides");
const shows_header = document.querySelector(".showsWrapper .row ");
const channels = document.querySelector(".channels");
console.log(shows_header);

guides.onscroll = (e) => {
  shows_header.scrollLeft = guides.scrollLeft;
  channels.scrollTop = guides.scrollTop;
  console.log("both")
}

channels.onscroll = (e) => {
  guides.scrollTop = channels.scrollTop;
  console.log("left")
}

shows_header.onscroll = (e) => {
  guides.scrollLeft = shows_header.scrollLeft;
  console.log("top")
}