隐藏的溢出中断动画

时间:2017-11-12 19:26:00

标签: javascript jquery html css

我这里有一个复杂的问题,但我会尽我所能。 所以我创建了一个动画,在我的页面上有<div> overflow: hidden,动画在此位置停留几秒钟,然后继续,任何想法,我怎么能解决这个问题?

&#13;
&#13;
$(document).ready(function(){
  $(".scrollTo").on('click', function(e){
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });
});
&#13;
#two {
  height: 110vh;
  overflow: hidden;
}
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

设置为overflow:的{​​{1}}属性导致您所在位置的动画出现故障。

hidden属性的一个小定义

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

尝试将overflow属性设置为overflowautoscroll并检查是否可以修复故障