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>