Overflow-x prevents scroll action

[mokargas]

Using this script on mobile (Nexus 5, Android 4.4, Chrome).

If overflow-x is set to hidden on the html ie, html{overflow-x:hidden}, vertical smooth-scrolling will be disabled and the default anchor functionality also fails to operate. Probably something simple I've missed, however disabling the script re-enables anchor functionality. Unsure why overflow-x disables VERTICAL smooth-scrolling.

[donaldallen]

I'm having the same issue.

[travco]

I'm unable to replicate this at the moment, I am running the (recently updated) up-to-date Chrome browser within android, and there is a possibility that it was fixed in a recent update to chrome.

If it's still happening @mokargas @donaldallen, it would be much appreciated if you could post the HTML/CSS on the page that is causing the issue.

[travco]

@kswedberg: As it's probably a little too late to get a response (with code) from the OP, and @donaldallen has yet to respond, Close issue?

If you do find the context causing this issue, please post it and we can reopen the issue.

[richgcook]

This is still an issue. If the overflow for both body and html, for x (`overflow-x:hidden') then smoothscroll does not work. I have this CSS applied on screen sizes below 580px... so that's when it kicks it, and doesn't work on browsers or mobile devices resized to this. Any thoughts @travco @kswedberg?

[richgcook]

Okay, I have found a solution... same was happening with jQuery's scrollTop (https://forum.jquery.com/topic/animate-scrolltop-blocked-by-overflow-hidden-in-chrome) so as long as you remove the height:100% on html and body, which I had applied, the smooth-scroll works just fine. Thanks.

[kswedberg]

@richgcook thanks for posting the solution. I'm going to reopen this issue until I get a chance to add a note to the documentation.

[rorykoehler]

I am experiencing this issue too. I have tried many self crafted and also google found versions of animated scroll solutions today and none of them worked. It was driving me a bit insane as console was not showing anything and even previously working solution didn't work. After implementing this plugin it still didn't work and I found this issue. Sure enough the overflow is the problem but judging from my experience I think this may be a deeper js or jQuery issue. For example this coffeescript also breaks when implemented with html & body @ 100% h & w and overflow-x: hidden;

    $('a[href^="#"]').on 'click', (e) ->
    e.preventDefault()
    target = @hash
    $target = $(target)
    $('html, body').stop().animate { 'scrollTop': $target.offset().top }, 900, 'swing', ->
      window.location.hash = target
      return
    return

[mr21]

It's a Google Chrome's bug: jquery/jquery#2215 (comment)

[rorykoehler]

@mr21 Thanks for the info.

[ExatechIT]

This seems to be more than an issue with chrome. Using other browsers with a sticky header, clicking the first link will scroll to the correct location, but then clicking a second one will either take you to the top of the page, or to an incorrect location. It only scrolls to the correct location when scrolling from the very top. Again, removing overflow-x: hidden; or the body, html{height:100%;} fixes the issue.

[JFrancisStalin]

I think, i found a solution for this problem after spending a day...

When you use 100% height and -webkit-overflow-scrolling: touch in body mobile wont recognise scrollTop position. To test this you can try $('html,body').scrollTop() you will get 0. If we remove 100% mobile scrolling will be too slow.

To fix this issue you can create a wrapper inside body and target only for mobile.

Style:

I have targeted only touch device, so no issue on desktop.

html {
&.touch {
overflow-y: scroll;
-webkit-overflow-scrolling: touch !important;

    body {
        height: 100% !important;
        overflow-y: scroll;
        #scroll-body {
            height: 100% !important;
            overflow-x: hidden;
            overflow-y: scroll;
        }
    }
}

Javascript:

$('html, body,#scroll-body').animate ({ 'scrollTop': $target.offset().top }, 900})

This one resolved mobile scroll lag and scrollTop issue.

Please let me know, if i missing anything here...

[theMartux]

I solved with this min-height: 100vh no height property