Javascript 引导模式下的水平滚动

嗨，我正在尝试在引导模式中添加一个水平滚动条。我知道水平滚动条不是一个好主意，但在我的情况下，我有动态内容，可以有可变的宽度，所以我想使模态体水平滚动时，宽度超过模态体的宽度

这是我试过的

<div class="modal-header">
<h3 class="modal-title">Decomposition</h3>

  <div class="modal-body">
  <div class="scoll-tree">
       <div class="list-group" ng-repeat="item in items"> 
          <a class="list-group-item" href="javascript:void(0);" ng-click="getChildren(item)">{{item.value}}</a>
       </div>

  </div>

</div>

这是我试过的小提琴。。

感谢您的帮助

提前感谢。

检查

HTML

<div class="modal-body">
    <div class="scoll-tree">
        <div class="list-group" ng-repeat="item in items"> 
            <a class="list-group-item" href="javascript:void(0);" ng-click="getChildren(item)">{{item.value}}</a>
        </div>
    </div>
</div>

JS

.modal-body {
    max-width: 100%;
    overflow-x: auto;
}
.scoll-tree {
    width:5000px;
}

var totalwidth = 190 * $('.list-group').length;

$('.scoll-tree').css('width', totalwidth);

---

这里我正在计算

.scoll tree

宽度，使用jQuery帮助显示水平滚动条。

很抱歉回答我自己的问题，我通过根据内部列表组的数量计算滚动树div的宽度来解决这个问题，因为单个列表组的宽度为180 px，宽度将为180*numberOfItems。代码如下：

$scope.getStyle = function(){
    var numberOfItems = $scope.tree.length;

    return {
        width  : 200 * numberOfItems + 'px',
        overflowX: 'auto'
    }   
}

<div class="modal-body" style="overflow-x: auto;">>
   <div class="scoll-tree" ng-style="getStyle();">
      <div class="list-group" ng-repeat="item in items"> 
        <a class="list-group-item" href="javascript:void(0);" ng-click="getChildren(item)">{{item.value}}</a>
      </div>
   </div>
</div>

$scope.getStyle=function（）{
var numberOfItems=$scope.tree.length；
返回{
宽度：200*numberOfItems+px，
overflowX:'自动'
}   
}
>

您描述了您尝试过的内容，但没有描述结果（如果有的话）。看起来怎么样？实际问题是什么？你的例子部分有效吗？完全没有？这对您的水平滚动有帮助吗。@SilverSkin我的解决方案不起作用，它不显示任何滚动bar@bbh不，那个问题是在谈论什么else@arsinawaz,您可以在代码中添加一个JSFIDLE吗？它确实使滚动条出现，但模态体和滚动条不会随着内容的增长而增长。@arsinawaz:您可以制作一个小提琴来显示您的prb吗？您可以看到它在下一行显示列表组，而不是用滚动条显示在一行中

$scope.getStyle = function(){
    var numberOfItems = $scope.tree.length;

    return {
        width  : 200 * numberOfItems + 'px',
        overflowX: 'auto'
    }   
}

<div class="modal-body" style="overflow-x: auto;">>
   <div class="scoll-tree" ng-style="getStyle();">
      <div class="list-group" ng-repeat="item in items"> 
        <a class="list-group-item" href="javascript:void(0);" ng-click="getChildren(item)">{{item.value}}</a>
      </div>
   </div>
</div>