带有滚动捕捉的简单 scrollX 元素，更改页码

Question

我正在尝试使用滚动捕捉创建简单的元素。我创建了一个demo in Codepen。

我想滚动到其他图像，滚动后，当其他图像可见时，更改页码和底部圆圈的颜色。

我尝试将 onscroll"function()" 放在 div .container 中并以某种方式计算 winW 和 scrollX 比率，但这种方法有问题且混乱。

请问我该怎么做？非常感谢。 ????

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

.container {
  display: flex;
  overflow: auto;
  flex: none;
  width: 100vw;
  height: 100vw;
  flex-flow: row nowrap;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.container::-webkit-scrollbar {
  display: none;
}

.pagination {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #777;
  color: #fff;
  line-height: 40px;
  width: 50px;
  font-size: 12px;
  border-radius: 20px;
  text-align: center;
}

.image {
  width: 100vw;
  height: 100vw;
  scroll-snap-align: center;
  flex: none;
}

#image-1 {
  background: url("https://i.ibb.co/fMp05Jf/tamanna-rumee-ov-U2t-Rgfj-H8-unsplash.jpg");
  background-size: cover;
  beckground-position: center;
}

#image-2 {
  background: url("https://i.ibb.co/Fx3Vm0S/pranav-madhu-KHD8vyputcg-unsplash.jpg");
  background-size: cover;
  beckground-position: center;
}

#image-3 {
  background: url("https://i.ibb.co/4Fznzvs/tijana-drndarski-cj-Es-Ho-Pk-ZOQ-unsplash.jpg");
  background-size: cover;
  beckground-position: center;
}

#image-4 {
  background: url("https://i.ibb.co/bPWXGfR/kristaps-ungurs-trs-Gn-MDb-T2-E-unsplash.jpg");
  background-size: cover;
  beckground-position: center;
}

#image-5 {
  background: url("https://i.ibb.co/5jyBdGK/joanna-kosinska-pj-Pe-CRkl83-M-unsplash.jpg");
  background-size: cover;
  beckground-position: center;
}

.pills {
  padding: 8px;
  display: flex;
  justify-content: center;
}

.circle {
  margin: 8px;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #ccc;
}

#circle-1 {
  background: #777;
}

<div class="container x mandatory-scroll-snapping"">
  <div class="pagination">1 / 5</div>
  <div class="image" id="image-1"></div>
  <div class="image" id="image-2"></div>
  <div class="image" id="image-3"></div>
  <div class="image" id="image-4"></div>
  <div class="image" id="image-5"></div>
</div>
<div class="pills">
  <div class="circle" id="circle-1"></div>
  <div class="circle" id="circle-2"></div>
  <div class="circle" id="circle-3"></div>
  <div class="circle" id="circle-4"></div>
  <div class="circle" id="circle-5"></div>
</div>

Answer 1

您可以简单地添加带有幻灯片 ID 名称的锚标签以自动滚动到它们：

药丸（带锚标签）

<div class="pills">
 <a href="#image-3">
  <div class="circle" id="circle-1"></div>
 </a>
</div>