jQuery UI 垂直选项卡使页面滚动“粘住”

jQuery UI Vertical Tabs makes page scroll "stick"

本文关键字：滚动 粘住 UI 垂直 选项 jQuery      更新时间：2023-09-26

我目前正在使用开箱即用的jQuery UI垂直选项卡片段，它如何影响整个页面滚动存在一个奇怪的问题。 每次更改选项卡，然后尝试向上或向下滚动页面主页时，它最终会"粘"在原地一点点，然后正常工作。 您可以在此处看到效果：http://investors.realcrowd.com/tab-tester

不确定问题是什么，甚至如何诊断它...我可以添加任何代码片段来解决此问题吗？ 感谢您的帮助！

不是 100% 确定这是否是解决方案，但是，在这一点上，我非常有信心它是。

检查源代码时，在代码的开头有一个触发器。更具体地说，它位于以下位置：

<script>
$('body').bind('touchmove', function(e){
  e.preventDefault();
});
</script>
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^'//,'') == this.pathname.replace(/^'//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>

在包含jQuery之后。

在此代码段中，您实际上有一个处理程序，每当调用非空定位点时都会触发该处理程序。经过几次检查后，此事件将调用此事件：

$('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);

这将执行 1 秒动画(1000 毫秒(，将视图滚动到所需目标的顶部偏移量。在这一秒中，如果你要滚动，它会迫使你被粘在目标偏移量的顶部，因此它会迫使你不要滚动到其他地方，而是在他想要的地方滚动。

要解决此问题，您可以将 1000 设置为 1，或者只是删除动画，即使实际滚动到目标的偏移量是个好主意，因此只需将 1000 替换为 1(或 10 甚至 100(就可以了。

希望这有帮助。

相关文章：