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