滚动容器外的可滚动项目;隐形滚动容器

Question

我在地图控件顶部有按钮的容器。此控件需要可滚动，因为可能有比屏幕高度允许的更多按钮。

我正在寻找的是一种让按钮显示在容器外面的方法，这意味着我可以将容器从屏幕上移开而不可见。

或者让左侧的滚动条不在地图和控件之间。

这是一些html

<div class='ctrl__scroll'>
  <button class="map__interface mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
    <i class="material-icons">add</i>
  </button>

  <button class="map__interface mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
    <i class="material-icons">remove</i>
  </button>

  <button>...</button>

</div>

这是css

.ctrl__scroll {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: rgba(0, 0, 0, 0.5);
}

.ctrl__scroll > .mdl-button {
  margin-top: 10px;
  margin-left: 10px;
}

这是屏幕截图的jsFiddle。

https://jsfiddle.net/goldrydigital/zez3gz21/

编辑：我现在已经解决了这个问题并改变了jsFiddle。我正在使用优秀的jScrollPane plugin，它允许我用滚动窗做任何我想做的事。

Answer 1

即使您可以在可滚动的父级之外显示子项（最好是反直觉），我认为您无法滚动它们。但是，您不能在同一个元素上使用overflow-x:visible; overflow-y:auto;。它会自动为X asis添加滚动条。

让我们考虑一下，大多数移动设备都有漂亮的，自我隐藏的半透明条，即使滚动条可见（现在也是如此），您的解决方案看起来也很好。我们只需要在非触摸设备上修复滚动条。在桌面设备上，它使它变得丑陋和不透明。这是一个可能的解决方案：

@media (min-width: 768px) {
  .ctrl__scroll > .mdl-button {
    margin: 10px 0 0 10px;
  }
  .ctrl__scroll {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
       -moz-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    overflow: visible;
    background-color: transparent;
  }
}

在当前CSS的末尾添加它。您更新的jsFiddle。

Answer 2

只需添加：

.map {
  padding-left: 90px;
  ...
}

这是副菜单的大小