简单的scrollX元素，支持滚动，可更改页码

Question

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

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

我试着把“.container ()”放在div中，并计算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>