How to scroll first div overflow then after that body scroll by using JavaScript?

80 Views Asked by Suman kumar At 11 March 2023 at 10:14

<body>
    <div class="container" style="overflow-y:scroll, width:100%,height:500px">
        <div class="overFlow" style="width:60%,height:"1000px,background-color:red,display;flex,align-items:center,justify-content:space-between">
        </div>
        <div class="formCContainer" style="width:40%">
            <form>
            <label style="width:100%">
                <input placeholder="enter your name" type="text/>
            </label >
            <label style="width:100%">
                <input placeholder="enter your password" type="password"/>
            </label>
            <button typle="submit">Submit</button>
            </form>
        </div>
    </div>
</body>

As you can see in the code above, I have defined three divs under the body tag: the first div has 100% width and height of 500px; the second div is a child of the first div and has 60% width and height of 1000px, causing it to overflow; and the last div has 40%. Now I want that when users scroll, they first finish scrolling div.overFlow, and then after finishing that, they are able to scroll body.

Please do do not recommend jQuery solutions.

Original Q&A

There are 1 best solutions below

Shankaja Aroshana On 11 March 2023 at 10:29

UPDATED ANSWER

OP needed a sticky sidebar. If someone stuck in this same problem just keep reading. Checkout the code-sandbox for hands on apporoch.

We could easily use CSS property position to achieve this result.

.element-you-want-to-stick{
    position:sticky;
    top:0; 
}

Here we use top:0; to make it stick to the top.you could use bottom ,left,right

OLD ANSWER

So you want to scroll overflow element and then body

The behavior you describe is usually achived by setting CSS overscroll-behavior to auto

    .overflow{
       overscroll-behavior:auto;
    }

How to scroll first div overflow then after that body scroll by using JavaScript?

There are 1 best solutions below

UPDATED ANSWER

OLD ANSWER

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in REACTJS

Related Questions in JAVASCRIPTCORE

Trending Questions

Popular # Hahtags

Popular Questions