オーバーフロー-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

あなたがただ隠しているスクロールバーが存在するはずなので、ボックスの影が途切れています。 .scrollコンテナに下のパディングを設定し

シンプルsolutoin

。

Answer 2

#containerにパディングを追加すると、常に影が表示されるようになりますが、水平シャドウは切り詰められます。

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