Сверстаем ограниченный по высоте модуль с прокруткой содержимого и динамическим затенением с тех сторон, куда можно прокручивать:

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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы