javascript - 需要调整向左滚动以使选项卡在 angularjs 应用程序中占据

Question

在我的 angularjs 应用程序中，我有大约 23 个选项卡。因此，我为具有 overflow :hidden 的选项卡指定的宽度的 90% 和 10% 宽度 Prev 以及下一步 图标。每个选项卡的宽度为 36px。因此，默认情况下，页面上有 5 个选项卡可见。现在，当我单击 Next 时，我只想向左滚动 5 个选项卡，这样继续直到最后一个选项卡可见。因此，在我的 Next 图标单击事件中，我尝试在我的 Controller 中执行如下操作，以获得最大向左滚动，然后使用它，但在我的代码 maxScrollLeft 返回 NaN。

 _self.getNextTabs = function () {            
          var maxScrollLeft = $element.scrollWidth - $element.clientWidth; 
          alert(maxScrollLeft);
          angular.element(document.querySelector('.main_tabSet .nav-tabs')).scrollLeft(600);    
        }

这里我硬编码了.scrollLeft(600);用于测试目的，所以当我点击Next时，选项卡向左滚动。但我想根据最大左侧滚动和正在占用的选项卡数量使此滚动正常工作。任何人都可以帮我解决它吗？

Answer 1

不确定 _self.getNextTabs 是否位于指令、 Controller 或其他位置，但名称 $element 表明(对我来说)它可能位于指令内？

如果是这样，那么我认为 $element 可能是一个 jquery 对象。并且 - 如果是这种情况，那么您需要使用语法 $element[0].scrollWidth 等...

_self.getNextTabs = function () {            
   var maxScrollLeft = $element[0].scrollWidth - $element[0].clientWidth; 
   angular.element(document.querySelector('.main_tabSet .nav-tabs')).scrollLeft(600);    
}