overflow-x: hidden breaks smooth scroll

Question

I am using the following javascript/jquery script to create smooth anchor scrolling

$(function() {
  $('a.page-scroll').bind('click', function(event) {
      event.preventDefault();
      var $anchor = $(this);
      console.log($anchor)
      $('html,body').stop().animate({
          scrollTop: $($anchor.attr('href')).offset().top
      }, 1500, 'easeInOutExpo');
   });
});

Which works great unless the following is included in my css styles sheet

html,body {
  /*Irrelevant style rules*/
  overflow-x: hidden; 
}

Why is this happening? When I remove or comment out the overflow-x: hidden;, the script works perfectly. If I leave it, it doesn't work at all.

Answer 1

Reading the first section of this work around tells me that you can't have one overflow hidden and the other visible. I added some JS to change the html, body css for the animation event. Hacky, but it works!

$(function() {
  $('a.page-scroll').bind('click', function(event) {
    event.preventDefault();
    var $anchor = $(this);
    $('html,body').css(
     "overflow-x", "visible"
    );
    $('html,body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');
    $('html,body').css(
      "overflow-x", "hidden"
    );
  });
});