Frontend Portal

CSS Scroll Snap



Мощное средство для создания прокручиваемых контейнеров без JavaScript. Он позволяет привязать положение прокрутки к местоположению или определённым элементам после того, как пользователь прокрутил страницу



Более подробно — Статья

Пощупать — Codepen



HTML:

<div class="gallery">

  <img src="img.jpg" alt="image">

  <img src="img.jpg" alt="image">

  <img src="img.jpg" alt="image">

  <img src="img.jpg" alt="image">

</div>

CSS:

body{

  display: grid;

  place-items: center;

  height: 100vh;

  background: #FFE6EA;

}

.gallery {

  width: 560px;

  height: 350px;

  position: relative;

  display: flex;

  overflow: auto;

  scroll-snap-type: x mandatory;

  border-radius: 10px;

  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;

}

.gallery img {

  width: 100%;

  height: 100%;

  position: sticky;

  left: 0;

  flex-shrink: 0;

  object-fit: cover;

  scroll-snap-align: start;

  scroll-snap-stop: always;

  border-radius: 10px;

}



/* скрываем полосу прокрутки (опционально) */

.gallery::-webkit-scrollbar{

  display: none;

}

👉 @FrontendPortal | #CSS