Как ограничить высоту скрола не через border?

Question

[accountnujen]

Нарисовал в photoshop'e, чего я хочу добиться:


есть отступ в 40px и снизу лежит затемнение. В конце блока также есть отступ в 40px. Если, к примеру, отступ можно организовать с помощью border, то если снизу не будет border, а будет условный padding, то скролл будет упираться в низ блока, а нужно, чтобы он ограничивался снизу и сверху 40px. Опять же, мне нужно, чтобы при прокрутке сверху так же был виден текст. То есть border я вообще использовать не могу.

Короче говоря, у меня не получается ограничить высоту скролла или сделать так, чтобы текст было видно...Что-то одно... Возможно ли как-нибудь организовать это на css?

С появлением и исчезновением затемнения я разберусь с помощью js.

Answer 1

[Nikolay Matyushkin]

Что-то типа того
с процентами у градиентов можете поиграться сами, если что

Comments

[accountnujen]

Сверху должен быть отступ у текста. И снизу отступ у текста. Градиент меня сейчас волнует в последнюю очередь.
Я для примера привёл чисто текст. На деле там более сложная конструкция может быть: и изображения, и таблица, и заголовки. То есть эти отступы должны на уровне контейнера

[Nikolay Matyushkin]

accountnujen, я не поверю, что мой изначальный пример не навёл вас ни на какую мысль, как в конце концов реализовать ваш кейс. Ну ок)) исправил на стики.

Теперь есть отступы, со скроллбаром надеюсь сами разберётесь?

[accountnujen]

Nikolay Matyushkin, я не вник в ситуацию. Да, спасибо. Допиливаю до нужного состояния.

У меня возник вопрос/проблема. Скролл не работает на бордере. Это норм? Просто вот тут каким-то чудом скролл работает https://www.quackit.com/html/codes/scroll_box_bord...
максимально тупо и странно, но у него работает, а у меня нет

[accountnujen]

Nikolay Matyushkin, это прикол какой-то?
Найди 10 отличий:
https://codepen.io/accountnujen/pen/ZErKeye
https://codepen.io/accountnujen/pen/mdXmWwo

[accountnujen]

Nikolay Matyushkin, background к херам собачьим ломает скролл)))) +1 баг у css)))