如果有办法做背景尺寸：覆盖并仍然能够滚动图像答案

【问题标题】：If there is a way to do background-size: cover and still be able to scroll around the image如果有办法做背景尺寸：覆盖并仍然能够滚动图像
【发布时间】：2019-10-20 17:11:32
【问题描述】：

我喜欢background-size: cover 居中，因为这意味着您的图像完全填充了容器元素。它只是让部分图像溢出到两侧，具体取决于它在容器中的大小。

我现在想做的是能够在background-size: cover 约束内滚动图像。也就是说，如果图像在顶部和底部溢出，我可以上下滚动触控板，它会在图像上平移，这样你就可以看到被覆盖的其余部分（有点就像在谷歌地图上一样）。这样，您可以获得两个好处：

background-size: cover 的主要好处（带居中）完全填充容器。
不过，如果我在上面滚动，我可以看到整个图像。

想知道这是否可行以及如何使用 CSS 或纯 JavaScript 来实现。

【问题讨论】：

我认为听平移事件并调整背景位置可以完成。虽然我认为这不会比重叠两个元素更容易：/

标签： javascript css scroll overflow background-size

【解决方案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，这有点糟糕。

【讨论】：