Видимая прокрутка позади обзора ⇐ Html

[Гость]

У меня есть следующая иерархия DOM и CSS < /p>

Код: Выделить всё

body {
margin: 0;
}

#main {
width: 100vw;
height: 100vh;

background-color: LightCyan;
}

#container {
display: flex;
justify-content: center;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;

background-color: beige;
}

#view {
width: 400px;
height: 200px;
box-sizing: border-box;
overflow: scroll;

border: dotted black 2px;
}

#content {
width: 320px;
height: 350px;
box-sizing: border-box;

background-color: olive
}< /code>

Как вы можете видеть из приведенного выше кода, у меня есть #Content прокручивать внутри #View , что каким -то образом близко к тому, что я хочу сделать, но не точно. #View . Теперь я хотел бы сделать следующее:

• Дополнительная высота, которая находится за пределами #View , должна быть видна, и
• Эта дополнительная высота должна быть немного темной (как если бы оверлей), однако сохраняет все, что можно увидеть через # #/код> то же самое. #View граница видимая «over» #Content div

Другими словами, мне нравится делать что -то подобное (и извиняюсь за ужасное искусство, но я надеюсь, что вы понимаете)
thanks.
>

Подробнее здесь: https://stackoverflow.com/questions/795 ... ehind-view