下拉滚动条位置

Question

到目前为止，我已经做到这一点：

​

我想要的是滚动条位置在右边的填充。就像这样：

我的HTML：

<div class="dropdown">
        <div id="dropdown-label" class="dropdown-active" data-toggle="dropdown"  title="{{selected.label}}">
          <i class="g2icon-user-dropdown dropdown-entity-icon"></i> {{ selected.label }}
          <span class="right-icon glyph-2 fa fa-chevron-down"></span>
        </div>
        <ul class="dropdown-menu" aria-labelledby="dropdown-label" lr-infinite-scroll="loadMore">
          <!-- My Organizations-->
          <li class="col-md-12 full-s calendar-list-break">
            <span>My Organization</span>
          </li>
          <li class="col-md-12 full-s calendar-item" ng-repeat="item in items | filter: 'organization'" title="{{item.label}}">
            <span ng-click="selectOption(item.id)"><i class="dropdown-entity-icon"></i> {{item.label}}</span>
          </li>

          <!-- My Groups -->
          <li class="col-md-12 full-s calendar-list-break">
            <span>My Groups</span>
          </li>
          <li class="col-md-12 full-s calendar-item" ng-repeat="item in items | filter: 'group'" title="{{item.label}}">
            <span ng-click="selectOption(item.id)"><i class=" dropdown-entity-icon"></i> {{item.label}}</span>
          </li>
        </ul>
      </div>

我的CSS：

.dropdown {
@include modal-scrollbar; //etc etc
}

我的混音看起来是这样的：

@mixin custom-scrollbar() {
  ::-webkit-scrollbar {
    width: 12px;
  }

  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px darkgrey;
  }
}

我怎样才能做到这一点？谢谢。注意:我找不到有用的谷歌搜索。

Answer 1

引用如下：Link，它添加了一个位置，并设置了父div元素的正确属性(在本例中是您的下拉类)，因此总体效果将与您想要的一样。