Problem with animate(scrollTop) and css overflow-x hidden when body & html are both set to 100%% width and height

Spent a few hours trying to get to the bottom of this before I figured out what is going on. I was trying to implement animated scroll with anchor links using animate(scrollTop) and the only thing that happened was the links broke completely. I found it strange as I was using previously functioning script (older version of jQuery) so I guess something broke in a recent update. The console shows no errors. I have tried many different versions of animated scroll so while I’m not 100%% certain of my diagnosis I think I am in the right area. My coffeescript is something like this:

  $('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

It works fine when the css is either:

html, body {
  overflow-x: hidden;
}

or

html, body {
  height: 100%%;
  width: 100%%;
}

but not when they are combined like this:

html, body {
  height: 100%%;
  width: 100%%;
  overflow-x: hidden;
}

This also happened when using 3rd party solutions see here.

Author: Fantashit

1 thought on “Problem with animate(scrollTop) and css overflow-x hidden when body & html are both set to 100%% width and height

Comments are closed.