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

Question

在我的 angularjs 应用程序中，我有大约 23 个选项卡。因此，我为带有 overflow : hidden 和 10% 宽度 Prev 和 Next 图标的选项卡提供的宽度为 90%。每个选项卡的宽度为 36px。所以默认情况下，页面上有 5 个选项卡可见。现在，当我单击 Next 时，我只想向左滚动 5 个选项卡，如此继续直到最后一个选项卡可见。因此，在我的 Next 图标单击事件中，我试图在我的控制器中执行以下操作，以使最大滚动条向左移动然后使用它，但在我的代码中 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 是否在指令、控制器或其他位置，但名称 $element 表明（对我来说）它可能在指令中？

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

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

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

need to adjust scroll left for the tabs to occupy in angularjs application

javascript

jquery

angularjs

jqlite