javascript - 将大图像移动到较小的可见容器内

Question

我正在尝试做一些基本的事情(编程初学者)。 我尝试拍摄一个大图像和一个较小的容器，并在用户滚动时将图像向上或向下移动到内部。

所以你可以 .

将黄色向上或向下移动，同时用户可以在相同位置看到红色(保持在文档流中)。

如果我用这个创建图像:

<div class="cvrContainer top left">
    <div class="cvrPhoto" id="photo0" style="background-image: url(https://picsum.photos/900/850);"></div>
</div>

1. 我应该将 cvrPhoto 设置为比 cvrContainer 大 200% 吗？
2. 如何使用 JS 向上/向下移动它，同时 overflow hidden 。

我不问怎么计算只问怎么设置和移动里面唯一的黄色

Answer 1

如果你想创建简单的视差效果，你可以通过position fixed来实现这个效果，在.cvrPhoto div上添加position: fixed。

.cvrContainer {
  padding: 30px;
  width: 100%;
  height: 2000px;
  overflow: auto;
  background: url(https://picsum.photos/900/850);
}

.cvrPhoto {
  height: 300px;
  width: 200px;
  position: fixed;
  top: 57px;
  background: yellow;
}

<div class="cvrContainer style=" background-image: url(https://picsum.photos/900/850); "">
  <div class="cvrPhoto"></div>
</div>