Child with vertical scroll inside a parent with horizontal scroll

Issue

I have a <div> with an horizontal scroll triggered with the mouse wheel. (Scrolling up or down with the wheel inside this element, will actually scroll left to right).

Inside this div I have another element with a vertical scroll.

Is it possible to trigger the scroll of the child element when the mouse is above, and then switch to the parent scroll (horizontal) when the child's scroll is finished ?

Solution

Something like this

I apologise if it does not work perfectly. I am on my Mac with a magic mouse

const parentDiv = document.getElementById('parentDiv');
const childDiv = document.getElementById('childDiv');

parentDiv.addEventListener('wheel', function(event) {
  if (event.target === childDiv) {
    // Check if child is fully scrolled
    if ((childDiv.scrollHeight - childDiv.scrollTop === childDiv.clientHeight && event.deltaY > 0) ||
      (childDiv.scrollTop === 0 && event.deltaY < 0)) {
      // Scroll parent horizontally
      parentDiv.scrollLeft += event.deltaY;
    } else {
      // Scroll child vertically
      childDiv.scrollTop += event.deltaY;
    }
  } else {
    // Scroll parent horizontally
    parentDiv.scrollLeft += event.deltaY;
  }

  event.preventDefault();
});

#parentDiv {
  width: 600px;
  height: 300px;
  overflow-x: scroll;
  white-space: nowrap;
  border: 1px solid black;
}

#childDiv {
  width: 200px;
  height: 300px;
  overflow-y: scroll;
  display: inline-block;
  vertical-align: top;
  border: 1px solid red;
}

.content {
  height: 600px;
  /* Height more than childDiv to enable vertical scrolling */
}

<div id="parentDiv">
  <!-- Child div with vertical scrolling -->
  <div id="childDiv">
    <div class="content">
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
      <p>Content that can be scrolled vertically...</p>
    </div>
  </div>

  <!-- Additional content for horizontal scrolling -->
  <div style="display: inline-block; width: 200px; height: 300px;">
    <p>More Content...</p>
  </div>
  <div style="display: inline-block; width: 200px; height: 300px;">
    <p>Even More Content...</p>
  </div>
  <div style="display: inline-block; width: 200px; height: 300px;">
    <p>Even More Content...</p>
  </div>
  <div style="display: inline-block; width: 200px; height: 300px;">
    <p>Even More Content...</p>
  </div>
  <div style="display: inline-block; width: 200px; height: 300px;">
    <p>Even More Content...</p>
  </div>
  <div style="display: inline-block; width: 200px; height: 300px;">
    <p>Even More Content...</p>
  </div>
</div>

Answered By - mplungjan