Angular JS UI Bootstrap 选项卡 (ui.bootstrap.tabs) 导致页面在选择时滚动/跳转

Posted 2023-02-19

【中文标题】Angular JS UI Bootstrap 选项卡 (ui.bootstrap.tabs) 导致页面在选择时滚动/跳转

【英文标题】：Angular JS UI Bootstrap tabs (ui.bootstrap.tabs) causes page to scroll/jump on select

【发布时间】：2015-11-27 07:31:45

【问题描述】：

选择选项卡会导致页面随机滚动，例如选择一个选项卡可以将页面几乎一直滚动到顶部然后我必须向下滚动才能查看选项卡的内容，如果我选择另一个选项卡页面滚动再次。

标签内容的大小可变，有些标签的元素比其他标签多，因此它们自然具有不同的高度，但我不确定这是否是随机页面滚动的原因。

我尝试了一些 jquery 来禁用链接默认操作，但没有成功。

$(function () 
   $('body').on('click', 'a[ng-click="select()"]', function (event) 
      event.preventDefault();
   );
);

另一个丑陋的解决方案是我将标签集包装在一个 div 中并在 div 上设置一个高度

<div class="col-md-12" id="profile-nav-tabs" style="
         height:500px;
         overflow-y: auto;
         overflow-x:hidden
         ">
        <tabset justified="true">
            <tab  heading="::strings.profile">
                <br />
                <div  ng-include="'tab-profile.php'"></div>
            </tab>
            .... more tabs
       </tabset>
</div>

【问题讨论】：

我对标签集本身应用了一个最小高度 (

【参考方案1】：

我遇到了同样的问题。跟踪代码后，我认为这是tabset指令的错误。

解决方案是（逐步）：

修改tabset.html，删除[ng-class="active: tab.active"] 修改[tab]指令的scope.$watch('active')的处理程序。

使用angular.element的addClass和removeClass函数添加/删除active类。

link: function(scope, elm, attrs, tabsetCtrl, transclude) 
scope.$watch('active', function(active) 
    /*if (active) 
      tabsetCtrl.select(scope);
    */
    var idx = tabsetCtrl.tabs.indexOf(scope);
    var elmPane = angular.element(elm[0]).parent().next().children()[idx]; //li->ul->div(tab-content)->div(tab-pane)
    if (active) 
        tabsetCtrl.select(scope);
        angular.element(elmPane).addClass('active');
    
    else 
        angular.element(elmPane).removeClass('active');
    
);

【讨论】：

您能否解释一下active 类分配如何导致页面滚动以及您的方法如何避免这种行为？