CODEWITHSUNDEEP
jquerycssscroll
user2426290
user2426290

Reputation: 382

scroll div content then continue body

I have a div container, which takes 80% of screen, and 2 fixed sidebars left and right, they take 10% each. My div is very large, so I am using overflow: hidden on it to hide the content. When user scrolls down, it ignores the div and just scroll the body.

Now, if I set div to overflow:scroll, user firstly scrolls the div, but then stops, and does not scroll the body.

Lastly, I noticed, that if I hover mouse mouse over oveflow: scroll div, it scrolls, but if I keep mouse over the fixed sidebars, then the body scrolls.

All that behavior is not what I need. I want my div:hidden scroll from top to bottom firstly, and when it is near the end, only then body to start scrolling.

So, I try and detect, once my div container reaches top, then I do:

$(#myDiv").focus(), but still, if mouse is over sidebars, which are fixed, body is scrolled.

Is there any solution to this, to make this work? Especially with overflow:hidden, seems like scrolling is not possible at all?

codepen.io/OrvaldMaxwell/pen/Yraryb Here is the example. I need div named "scrollMeAutoPLS" scroll first, and then continue with the body

Upvotes: 1

Views: 975

Answers (1)

Taufik Nur Rahmanda
Taufik Nur Rahmanda

Reputation: 1969

Simple:

$('#yourDiv').animate({ scrollTop:$('#yourDiv')[0].scrollHeight },800,function() {
    $('html,body').animate({ scrollTop:$(document).height() },800);
});

800 is a duration in milliseconds.

Upvotes: 1

Related Questions