Если есть способ сделать размер фона: покройте и все еще сможете прокручивать изображение

Question

Мне нравится background-size: cover с центрированием, потому что это означает, что ваше изображение полностью заполняет элемент контейнера. Это просто позволяет частям изображения переполняться по сторонам в зависимости от того, как оно помещается в контейнер.

Теперь я хотел бы прокручивать изображение в пределах ограничения background-size: cover. То есть, если изображение переполняется сверху и снизу, я могу прокручивать свой трекпад вверх и вниз, и оно выглядит как pans по изображению, чтобы вы могли видеть остальную часть, которая была покрыта (как на Google Maps). Таким образом, вы получаете два преимущества:

• background-size: cover Основное преимущество (с центрированием) полного заполнения контейнера.
• пока, я могу увидеть все изображение, если прокрутить его.

Хотите знать, возможно ли это и как это можно сделать с помощью CSS или обычного JavaScript.

Answer 1

Я не думаю, что вы можете достичь этого без некоторого тяжелого JavaScript или библиотеки.

С HTML и CSS это лучшее, что я могу сделать:

.cover{
  width: 180px;
  height: 180px;
  display: inline-block;
  overflow: auto;
  overflow: -moz-scrollbars-none; 
  -ms-overflow-style: none;
}

.cover::-webkit-scrollbar { 
  width: 0 !important;
}

.cover::after {
  content: '';
  display: block;
  width: 240px;
  height: 360px;
  background-image: url(https://picsum.photos/240/360);
}

<div class="cover"></div>
<span>← Scroll this</span>

Это работает, если вы знаете размеры изображения, но вам нужно указать width и height вручную, что отчасти плохо.