スクロール可能なコンテナの外側にあるスクロール可能なアイテム。表示されないスクロールコンテナ

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のスクロールバーも自動的に追加されます。

ほとんどのモバイルデバイスは見栄えが良く、自己隠れる半透明のバーがあり、スクロールバーが表示されていても（今のように）ソリューションが見栄えがよいことを考慮してみましょう。私たちは、非タッチデバイス上のスクロールバーを修正するだけです。醜く不透明になっているデスクトップデバイス上。可能な解決策は次のとおりです。

@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; 
    ... 
} 

努力のため