Ящик-тень все еще отключается с переполнением-y, установленным на видимый

Question

У меня такая же проблема, как у this question, но мне нужно, чтобы overflow-x был установлен в scroll, иначе весь документ будет шире экрана. Теоретически установка overflow-y на visibleдолжна держать тень коробки видимой, но она по-прежнему отключает ее. Это можно увидеть с помощью приведенного ниже кода.

*::-webkit-scrollbar { 
 
    display: none; 
 
} 
 
body { 
 
    margin: 0; 
 
    background: #ddd; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.scroll { 
 
    width: 100%; 
 
    height: 60px; 
 
    overflow-x: scroll; 
 
    overflow-y: visible; 
 
    white-space: nowrap; 
 
} 
 
.box { 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 5px; 
 
    background: #fff; 
 
    box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 1); 
 
}

<div id="container"> 
 
    <div class="scroll"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>

Я хотел бы, чтобы падающая тень, чтобы быть полностью видимы вне родительского DIV, возможно ли это вообще?

Answer 1

Коробчатая тень отключается, потому что должна быть полоса прокрутки, которую вы только скрываете.

Простой solutoin

Установите нижний отступы для .scroll контейнера.

Answer 2

Вы можете добавить дополнение к # контейнеру, чтобы он всегда показывал тень, НО горизонтальные тени будут срезаны.

*::-webkit-scrollbar { 
 
    display: none; 
 
} 
 
body { 
 
    margin: 0; 
 
    background: #ddd; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#container { 
 
    max-width: 300px; 
 
    overflow: scroll; 
 
    padding: 100px 0; 
 
} 
 
.scroll { 
 
    width: 100%; 
 
    height: 60px; 
 
    white-space: nowrap; 
 
} 
 
.box { 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 5px; 
 
    background: #fff; 
 
    box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, .5); 
 
}

<div id="container"> 
 
    <div class="scroll"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>