溢出-X：隐藏休息平滑滚动

Question

我使用下面的JavaScript/jQuery的脚本来创建平滑锚点滚动

$(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'); 
    }); 
}); 

，除非以下是包含在我的CSS样式表伟大的工程

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

这是怎么发生的？当我删除或注释掉overflow-x：hidden时，脚本完美地工作。如果我离开它，它根本不起作用。

Answer 1

读this work around的第一部分告诉我，你不能有一个隐藏的溢出和另一个可见。我添加了一些JS来更改动画事件的html，body css。哈克，但它的作品！

$(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" 
    ); 
    }); 
});