滾動容器外的可滾動項目;隱形滾動容器

我有容器的地圖控件頂部的按鈕。該控件需要可滾動，因爲可能有更多的按鈕比屏幕高度所允許的更多。滾動容器外的可滾動項目;隱形滾動容器

我所尋找的是一個方法，有將顯示，這意味着我可以把容器放到屏幕是不可見的容器外部的按鈕。

或者使滾動條位於左側，使其不在地圖和控件之間。

下面是一些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，它允許我使用scrollpanes執行任何我想要的操作。

來源

2016-10-09 Dennis Bauszus

即使您可以在可滾動的父級之外顯示子女（這在最佳情況下是違反直覺的），我不認爲您可以滾動它們。但是，您不能在同一個元素上使用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。

來源

2016-10-09 18:37:40

謝謝你的努力，但我寧願保留菜單中的一列。有按鈕可能會彈出右側的其他按鈕。柔性網格可能看起來有點忙亂。 –

只需添加：

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

這是你身邊的菜單的大小

來源

2016-10-09 18:43:02

滾動容器外的可滾動項目;隱形滾動容器

回答

相關問題