How I can show overflow x to auto and overflow y to visible?

Issue

in my case I want to show overflow in horizontal direction to scroll or auto but in vertical direction… I want to visible it without scroll. (may be image clear this). Is here any way to solve it with CSS or JavaScript.

Solution

that scrollbar is not suppose to be there and since we are now using javascript so use wheel event to scroll and avoid scrollbar it is the final product i believe what you would like to have

const main = document.querySelector(".wrapper")
main.addEventListener("scroll",e=>{
    const subs = main.querySelectorAll(".nav > .each > .sub-menu")   
    subs.forEach(sub=>{
        let parent = sub.closest(".each"),
            parentX = parent.getClientRects()[0].x
        sub.style.left = parentX + "px"
    })
})

main.addEventListener("wheel",e=>{
    e.preventDefault()
    let speed = 0.4
    main.scrollBy(e.deltaY * speed,0)
})
.each:hover > .sub-menu {display: block !important;}
.sub-menu{display: none;}
.nav .sub-menu > .each > .sub-menu {
    left: 100%;
    top:0px;
}
.wrapper {
    width: 320px;
    overflow-x: hidden;
    overflow-y: hidden;
}
.title {width: max-content;}
.each {
    background:white;
    cursor: pointer;
}
.each:hover {background:rgb(194, 194, 194);}
.nav {border:1px solid black;}
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="wrapper">
    <div class="nav flex w-max">
        <div class="each"><div class="title p-1 px-4 border-l">menu</div></div>
        <div class="each"><div class="title p-1 px-4 border-l">menu</div></div>
        <div class="each">
            <div class="title p-1 px-4 border-l">with sub</div>
            <div class="sub-menu absolute border">
                <div class="each">
                    <div class="title p-1 px-4">sub menu</div>
                    <div class="sub-menu absolute border">
                        <div class="each">
                            <div class="title p-1 px-4 border-l">2nd sub</div>
                            <div class="sub-menu absolute border">
                                <div class="each"><div class="title p-1 px-4 border-l">3rd sub</div></div>
                            </div>
                        </div>                            
                    </div>
                </div>
                <div class="each"><div class="title p-1 px-4">2nd menu</div></div>
                <div class="each"><div class="title p-1 px-4">2nd menu</div></div>
            </div>
        </div>

        <div class="each"><div class="title p-1 px-4 border-l">menu</div></div>            
        <div class="each"><div class="title p-1 px-4 border-l">menu</div></div>            
        <div class="each"><div class="title p-1 px-4 border-l">menu</div></div>            
    </div>
</div>

Answered By – Amir Rahman

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published