javascript - overflow hidden 中断动画

我这里有一个有点复杂的问题，但我会尽力而为。所以我创建了一个动画，在我的页面上有一个 <div>与 overflow: hidden ，动画在此位置停止几秒钟然后继续，知道我该如何解决这个问题吗？

$(document).ready(function(){
  $(".scrollTo").on('click', function(e){
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });
});

#two {
  height: 110vh;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="test">
  <li><a href="#three" class="scrollTo" data-content="">tutorials</a></li>
</ul>

最佳答案

设置为 hidden 的 overflow: 属性导致您的动画在上述位置出现故障。

overflow 属性的一些定义

overflow 属性指定当内容溢出元素的框时会发生什么。此属性指定当元素的内容太大无法容纳在指定区域时是裁剪内容还是添加滚动条。

尝试将 overflow 属性设置为 auto、scroll 或 visible 并检查这是否修复了故障

关于javascript - overflow hidden 中断动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47252954/