W3Schools Tryit 编辑器 - W3Schools 中文教程

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  scroll-snap-type: both proximity;
  width: 50%;
  margin: 30px auto;
  white-space: nowrap;
  aspect-ratio: 1/1;
  overflow-x: scroll;
  overflow-y: scroll;
  border: solid black 2px;
}

.green    { background-color: lightgreen; }
.pink     { background-color: lightpink; }
.blue     { background-color: lightblue; }
.yellow   { background-color: yellow; }
.grey     { background-color: lightgray; }

#container > div {
  display: inline-block;
  height: 80%;
  border-radius: 10%;
  aspect-ratio: 1/1;
  margin: 5px;
  scroll-snap-align: center;
}
</style>
</head>
<body>

<h3>CSS scroll-snap-type property, with proximity value.</h3>
<p>Proximity snap type value does not snap elements into place if scrolling position is right inbetween two snap points. Try scrolling so that you are right in between two elements, let go, and there should be no snapping.</p>

</body>
</html>