I want to scroll inside a div when I hover it instead of scrolling the whole page (with mouse wheel). This works usually for scrolling for overflowY (up and down) but not for overflowX (sideways)
I dont know if its doable with only CSS or if it needs javascript or jquery
I have made an example with a div that has an overflow of X axis with a scroll, and when u point at it and use ur scroll wheel it scrolls the page instead of the div that you are hovering.
Thanks!
.parent {
background: red;
height: 100px;
width: 100px;
display: flex;
overflow-x: scroll;
}
.child {
background: blue;
border: 1px solid black;
margin: 3px;
height: 30px;
width: 50px;
flex-shrink: 0;
}
body {
height: 200vh;
}
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire