How to disable the page scroll by going over an element using pure Javascript and (or) Css, and without hiding the scroll bar

Question

Having an example of a slide that works with the mouse scroll, however it is horizontal. The problem is that the page’s vertical scroll conflicts with the slide’s horizontal scroll. How could I disable the scroll of the page while the mouse enters the slide? In the code I put a solution to leave the page overflow as "Hidden" when passing the mouse over the slide, but it hides the scroll bar, and would like it to remain, only the scroll event stops working.

The code:

  <!---------- Estilo ---------->

  <style>
    .slider {
      margin: 0 auto;
      width: 300px;
      height: 300px;
      background-color: rgb(88, 156, 140);
      overflow-x: scroll;
    }

    .slides {
      width: 300%;
      height: 100%;
      display: flex;
      text-align: center;
    }

    .slide {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }

    .slide:nth-child(1) {
      background-color: rgb(113, 156, 113);
    }

    .slide:nth-child(2) {
      background-color: rgb(120, 121, 150);
    }

    .slide:nth-child(3) {
      background-color: rgb(235, 90, 90);
    }
  </style>

  <!---------- Conteúdo ---------->

  <div class="slider">
    <div class="slides">
      <div class="slide">1</div>
      <div class="slide">2</div>
      <div class="slide">3</div>
    </div>
  </div>
  <div style="height: 1000px;"></div>

<!---------- Script ---------->

<script>
  let slider = document.getElementsByClassName('slider')[0]

  slider.addEventListener('mouseenter', () => {
    document.body.style.overflow = 'hidden'
  })

  slider.addEventListener('mouseleave', () => {
    document.body.style.overflow = null
  })

  slider.addEventListener('wheel', (event) => {
    if (event.deltaY > 0) {
      slider.scrollLeft += 300;
    } else {
      slider.scrollLeft -= 300;
    }
  })
</script>

Answer 1

Guys, looking around here, I just figured out an answer, but I’ll leave it up to anyone with the same question.

Just use this script, I do not know exactly how it works, but serves to disable the windows scroll:

function preventDefault(e) {
  e.preventDefault();
}

// modern Chrome requires { passive: false } when adding event
var supportsPassive = false;
try {
  window.addEventListener(
    "test",
    null,
    Object.defineProperty({}, "passive", {
      get: function () {
        supportsPassive = true;
      },
    }),
  );
} catch (e) {}

var wheelOpt = supportsPassive ? { passive: false } : false;
var wheelEvent =
  "onwheel" in document.createElement("div") ? "wheel" : "mousewheel";

And then make the call, in my case, will be activated when the mouse enters the slide and deactivated when leaving:

slider.addEventListener("mouseenter", () => {
  window.addEventListener(wheelEvent, preventDefault, wheelOpt);
});

slider.addEventListener("mouseleave", () => {
  window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
});

The whole code worked like this (just copy and paste inside the body into html):

 <!---------- Estilo ---------->

  <style>
    .slider {
      margin: 0 auto;
      width: 300px;
      height: 300px;
      background-color: rgb(88, 156, 140);
      overflow-x: scroll;
    }

    .slides {
      width: 300%;
      height: 100%;
      display: flex;
      text-align: center;
    }

    .slide {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }

    .slide:nth-child(1) {
      background-color: rgb(113, 156, 113);
    }

    .slide:nth-child(2) {
      background-color: rgb(120, 121, 150);
    }

    .slide:nth-child(3) {
      background-color: rgb(235, 90, 90);
    }
  </style>

  <!---------- Conteúdo ---------->

  <div class="slider">
    <div class="slides">
      <div class="slide">1</div>
      <div class="slide">2</div>
      <div class="slide">3</div>
    </div>
  </div>
  <div style="height: 1000px;"></div>

  <!---------- Script ---------->

  <script>
    let slider = document.getElementsByClassName('slider')[0]



    function preventDefault(e) {
      e.preventDefault();
    }

    var supportsPassive = false;
    try {
      window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
        get: function () { supportsPassive = true; }
      }));
    } catch (e) { }

    var wheelOpt = supportsPassive ? { passive: false } : false;
    var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';

    slider.addEventListener('mouseenter', () => {
      window.addEventListener(wheelEvent, preventDefault, wheelOpt)
    })

    slider.addEventListener('mouseleave', () => {
      window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
    })

    slider.addEventListener('wheel', (event) => {
      if (event.deltaY > 0) {
        slider.scrollLeft += 300;
      } else {
        slider.scrollLeft -= 300;
      }
    })
  </script>

Answer 2

To hide the scroll but still being able to scroll you can use:

/* Oculta scrollbar no Chrome, Safari e Opera */
.exemplo::-webkit-scrollbar {
  display: none;
}

/* Oculta scrollbar no IE, Edge e Firefox */
.exemplo {
  -ms-overflow-style: none;  /* IE e Edge */
  scrollbar-width: none;  /* Firefox */
}