W3Schools Tryit 编辑器 - W3Schools 中文教程

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  width: 60%;
  aspect-ratio: 3/2;
  padding: 0 40px;
  margin: auto;
  border: solid black 2px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
}

.blue {
  background-color: lightblue;
  height: 95%;
  aspect-ratio: 5/3;
}

.green {
  background-color: lightgreen;
  height: 80%;
  aspect-ratio: 5/4;
}

.blue, .green {
  display: inline-block;
  margin: 2px;
  scroll-snap-align: none start;
}
</style>
</head>
<body>

<h3>CSS scroll-padding-inline property.</h3>
<p>Scroll-padding-inline property is set on the container element, so that snap position is offset by a padding from the container in the inline direction.</p>
<p>In this case, snap position is set to start in inline direction, so the element in focus should snap into place at the very left of the container. But instead, because of the scroll-padding-inline value, the element in focus is offset by 20px distance from the container to the child element.</p>

</body>
</html>