-1

Tendo um exemplo de um slide que funciona com o scroll do mouse, porém ele é horizontal. O problema é que o scroll vertical da página conflita com o scroll horizontal do slide. Como eu poderia desabilitar o scroll da página enquanto o mouse entra no slide? No código eu coloquei uma solução de deixar o overflow da página como "hidden" ao passar o mouse em cima do slide, porém ele esconde a barra de rolagem, e gostaria que ela permanecesse, só o evento de scroll parasse de funcionar.

O código:


  <!---------- 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>

2 Respostas 2

0

Galera, vasculhando aqui, acabei descobrindo uma resposta, mas vou deixar aí pra quem estiver com a mesma dúvida.

É só usar esse script, eu não sei exatamente como funciona, mas serve para desativar o scroll do windows:

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";

E depois fazer a chamada, nesse meu caso, será ativada quando o mouse entrar no slide e desativado quando sair:

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

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

O código inteiro funcionando ficou assim (só copiar e colar dentro do body no 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>
0

Para ocultar o scroll mas continuar podendo fazer a rolagem vc pode usar:

/* 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 */
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .