Boîte-ombre toujours couper avec débordement-y mis à visible

Question

J'ai le même problème que dans this question, mais j'ai besoin de overflow-x mis à scroll sinon le document entier sera plus large que l'écran. En théorie, si vous réglez overflow-y sur visible, doit conserver l'ombre de la boîte visible, mais elle l'interrompt toujours. Cela peut être vu avec le code ci-dessous.

*::-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>

Je voudrais que l'ombre d'être entièrement visible à l'extérieur de la div parent, est-ce possible?

Answer 1

L'ombre de la boîte est coupée car il doit y avoir une barre de défilement que vous masquez.

Simple solutoin

Définir un rembourrage inférieur à .scroll contenant.

Answer 2

Vous pouvez ajouter un remplissage au #container pour qu'il affiche toujours l'ombre, MAIS les ombres horizontales seront coupées.

*::-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>