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
}

我的SASS mixin看起来像这样：

@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

请参阅：apply 它添加了一个位置并设置了父div元素的正确属性（在这种情况下是你的下拉类），因此整体效果看起来就像你想要的一样。

下拉滚动条位置

1 个答案: