JQuery ScrollTop not working with Overflow

Question

When building my mobile website, I had to add these properties to my body to eliminate excess whitespace:

html,body
{
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow-y: scroll;
    overflow-x: hidden; 
    -webkit-overflow-scrolling: touch;
}

However, my jQuery scrollTop functions, regarding parallax and the navbar, do not work now. These functions do not work on mobile.

$n = ".navbar";
$(window).scroll(function(){
    if($(window).scrollTop() > 300){
        $($n).css("background-color", "rgba(255,255,255,.2)");
    } else {
        $($n).css("background-color", "transparent");
    }
});

I have tried removing the overflow from the body, and keeping it solely on HTML, and vice versa, which does fix my issue, however the whitespace returns. I have looked online, however I cannot seem to find anything regarding this issue.

If you want to view the website, the URL is http://studysesh.us. Keep in mind, it is just beginning, currently the homepage is the only page. Thank you.

mhm.... When I shrink my window to a mobile resolution, there is nothing more displaying in the console. I'm gonna assume that this -webkit-overflow-scrolling: touch; is the cause. (testing in vivaldi with google dev tools) — TCHdvlp
– TCHdvlp, Commented Jun 7, 2016 at 11:49
Yes. I added a media query to remove the overflow unless the window is roughly mobile size. I am not sure why it does not pick up the scrolling. What I do notice is that the scrolling does log when you bounce the browser (meaning either at top or bottom) — Trevor Judice
– Trevor Judice, Commented Jun 7, 2016 at 11:55
An other thing strange. If you scroll down then shrink the window to mobile resolution, it's ok. If you now stretch it a little bit, the window will come back to top. If you shrink it again, it will go back to the last position. It's like something is reseted or like you have two different document... weird — TCHdvlp
– TCHdvlp, Commented Jun 7, 2016 at 12:16
@TCHdvlp What element are you talking about? I don't really understand what you mean. — Trevor Judice
– Trevor Judice, Commented Jun 7, 2016 at 12:29
I just scrolled down then played with the window dimensions. I talk about the whole window. — TCHdvlp
– TCHdvlp, Commented Jun 7, 2016 at 12:50

Ahmad Baktash Hayeri · Accepted Answer · 2016-06-07 18:15:34Z

2

Figured it out by removing the height property on the body, which literally is equivalent to setting the height to auto.

body {
   height: auto;
   max-width: 100%;
}

When you set a value to the height of the body explicitly, scrolling on any area over it would actually trigger scroll event inside the body itself, and not the window. In my opinion, this was the source of the problem with the scroll event not being fired.

Meanwhile, overflow-y: scroll; is redundant and needless in your case, as it forces an ugly scroll-bar on the body when the width of the viewport is reduced significantly.

answered Jun 7, 2016 at 18:15

Ahmad Baktash Hayeri

5,9004 gold badges32 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jikar · Accepted Answer · 2016-06-07 12:19:03Z

0

I think it might be caused by the

overflow-y: scroll;
overflow-x: hidden;

Try to change them by

overflow: auto;

answered Jun 7, 2016 at 12:19

Jikar

489 bronze badges

1 Comment

Trevor Judice Over a year ago

Nope, tried it out. The scroll still does not work, nothing logs in console.

Colin · Accepted Answer · 2020-06-03 19:01:33Z

0

I had this same issue where scrollTop() was not working. Turns out it was because I had some inline styles at the top of the page. It seems scrollTop() expects a certain HTML structure so having the <style> tag as the first element on the page breaks it. This is what it looked like before the fix:

<style>
    .my-class {
        ...
    }
</style>
<!doctype html>
<html lang="en">
    <head>
        ...
    </head>
</html>

I moved the inline stylse into the <head> tag which resolved the issue. Here's how it looks after the fix:

<!doctype html>
<html lang="en">
    <head>
        <style>
            .my-class {
                ...
            }
        </style>
    </head>
</html>

answered Jun 3, 2020 at 19:01

Colin

1,8661 gold badge21 silver badges25 bronze badges

Collectives™ on Stack Overflow

JQuery ScrollTop not working with Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related