Сверстаем ограниченный по высоте модуль с прокруткой содержимого и динамическим затенением с тех сторон, куда можно прокручивать:
1. Право авторства — право признаваться автором произведения и право автора на имя — право использовать или разрешать использование произведения под своим именем, под вымышленным именем (псевдонимом) или без указания имени, то есть анонимно, неотчуждаемы и непередаваемы, в том числе при передаче другому лицу или переходе к нему исключительного права на произведение и при предоставлении другому лицу права использования произведения. Отказ от этих прав ничтожен.
2. При опубликовании произведения анонимно или под псевдонимом (за исключением случая, когда псевдоним автора не оставляет сомнения в его личности) издатель (пункт 1 статьи 1287), имя или наименование которого указано на произведении, при отсутствии доказательств иного считается представителем автора и в этом качестве имеет право защищать права автора и обеспечивать их осуществление. Это положение действует до тех пор, пока автор такого произведения не раскроет свою личность и не заявит о своем авторстве.
Вся необходимая разметка, стили и щепотка Яваскрипта:
<div class="scrollable">
<div class="scrollable__in js-scrollable">
<!-- … -->
</div>
</div>
.scrollable {
max-height: 12em;
position: relative;
}
/* Дополнительная обёртка для работы затенений */
.scrollable__in {
height: 100%;
overflow: scroll;
padding: 15px 10px;
box-sizing: border-box;
}
/* Затенения сверху и снизу псевдоэлементами. По умолчанию скрыты прозрачностью */
.scrollable:before,
.scrollable:after {
content: '';
height: 30px;
position: absolute;
left: 0;
right: 0;
pointer-events: none;
opacity: 0;
/* Плавное изменение прозрачности */
transition: .15s linear;
}
.scrollable:before {
top: 0;
background: linear-gradient(to bottom, #fff, transparent);
}
.scrollable:after {
bottom: 0;
background: linear-gradient(to bottom, transparent, #fff);
}
/* Служебные классы is__scrolled и is__bottom показывают затенения. Служебные классы будем проставлять Яваскриптом по мере прокрутки */
.scrollable.is__scrolled:before,
.scrollable:not(.is__bottom):after {
opacity: 1;
}
/* Яваскрипт можно положить в конец ХТМЛ-файла внутри тега script, но лучше вынести в отдельный файл */
/* Запас, чтобы затенения не появлялись до прокрутки хотя бы 5 пикселей сверху и снизу */
const GAP = 5
/* Найти все элементы с классом js-scrollable, и для каждого… */
document.querySelectorAll('.js-scrollable').forEach(($el) => {
/* …выполнять функцию при прокрутке */
$el.addEventListener('scroll', () => {
/* Элемент сколько-нибудь прокручен? */
const isScrolled = $el.scrollTop > GAP
/* Элемент прокручен до конца? */
const isBottom = $el.scrollTop + $el.offsetHeight > $el.scrollHeight - GAP
/* Переключить служебные классы родительского контейнера на основе проверок */
$el.parentElement.classList.toggle('is__scrolled', isScrolled)
$el.parentElement.classList.toggle('is__bottom', isBottom)
})
})
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.