How to make an invisible clickable area that would toggle scrolling (JavaScript)?

Question

I'm making a small website built entirely with flexbox columns and rows. One of the rows is horizontally scrollable — howewer, I want it to be scrolled not only with scrolling, but also by clicking either on left or right half of the visible part of the row. Plus, hovering on the left side should change cursor to cursor: w-resize and on the left side — to cursor: e-resize.

see screenshot see a sketch of what i'm trying to achieve

    <div class="project">
      <div class="project-images">
       <div id="project-image"><img id="image-standart-height" style="max-height: 400px" src="/Users/andrei/Desktop/All Work/portfolio and cv/my website/images/bahorvesna.png" alt=""></div>
       <div id="project-image"><img id="image-standart-height" style="max-height: 400px" src="/Users/andrei/Desktop/All Work/portfolio and cv/my website/images/bahorvesna.png" alt=""></div>
       <div id="project-image"><img id="image-standart-height" style="max-height: 400px" src="/Users/andrei/Desktop/All Work/portfolio and cv/my website/images/bahorvesna.png" alt=""></div>
       <div id="project-image"><img id="image-standart-height" style="max-height: 400px" src="/Users/andrei/Desktop/All Work/portfolio and cv/my website/images/bahorvesna.png" alt=""></div>

      </div>
      <div class="project-text">
Bahor/Vesna
      </div>
      </div>

#project-image {
  flex: 0 0 auto;
  max-height: 400px;
}

#image-standart-height {
  max-height: 400px;
}

.project-text {
  display: flex;
  gap: 20px;
  align-items: baseline;
}

I was thinking of creating an invisible layer on a different z-axis level, but I assume it would be difficult not to ruin the flexbox.

Is it possible to make a function in JS to detect when a mouse is entering a certain area of the visible part of the div, change cursor and make the area clickable?

Answer 1

You can also do it without adding any extra div's, by checking the position of the mouse pointer relative to the container. Try it out by clicking the left and right half of the box in the example.

If you have multiple elements, all you need to do is loop the set of elements and put the two event listeners inside the loop.

const containers = document.querySelectorAll('.container');

containers.forEach((container) => {
  container.addEventListener('click', (e) => {
    const clientRect = e.currentTarget.getBoundingClientRect();
    if ((e.pageX - clientRect.left) < clientRect.width / 2)
      console.log('Clicked left half');
    else
      console.log('Clicked right half');
  });

  container.addEventListener('mousemove', (e) => {
    const clientRect = e.currentTarget.getBoundingClientRect();
    if ((e.pageX - clientRect.left) < clientRect.width / 2)
      container.style.cursor = 'w-resize';
    else
      container.style.cursor = 'e-resize';
  });
});

.container {
  width: 300px;
  height: 100px;
  border: 1px solid #000;
  margin: 50px auto;
}

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>