New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Overflow-x prevents scroll action #53

Open
mokargas opened this Issue Jan 5, 2014 · 12 comments

Comments

Projects
None yet
10 participants
@mokargas

mokargas commented Jan 5, 2014

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

This comment has been minimized.

donaldallen commented May 6, 2014

I'm having the same issue.

@kswedberg kswedberg referenced this issue May 6, 2014

Closed

Android/iOS #55

@travco

This comment has been minimized.

travco commented Jul 22, 2014

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

This comment has been minimized.

travco commented Jul 31, 2014

@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.

@kswedberg kswedberg closed this Aug 1, 2014

@richgcook

This comment has been minimized.

richgcook commented Aug 29, 2014

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

This comment has been minimized.

richgcook commented Aug 29, 2014

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

This comment has been minimized.

Owner

kswedberg commented Aug 29, 2014

@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.

@kswedberg kswedberg reopened this Aug 29, 2014

@rorykoehler

This comment has been minimized.

rorykoehler commented Apr 16, 2015

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

This comment has been minimized.

mr21 commented Apr 20, 2015

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

@rorykoehler

This comment has been minimized.

rorykoehler commented Apr 20, 2015

@mr21 Thanks for the info.

@ExatechIT

This comment has been minimized.

ExatechIT commented Jan 19, 2016

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

This comment has been minimized.

JFrancisStalin commented Oct 21, 2016

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

This comment has been minimized.

theMartux commented Feb 23, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment