dimanche 2 mai 2021

How to make div scrollable sideways using mousewheel?

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