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

overflow-x：hidden break平滑滚动

1 个答案: