W3Schools Tryit 编辑器 - W3Schools 中文教程

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

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

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

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

<h3>CSS scroll-padding-inline-start property.</h3>
<p>With the direction property value set to rtl the start of the element in the inline direction is changed from the left side to the right side, and this also affects the scroll-padding-inline-start property.</p>
<p>In this example, snap position is set to start in the inline direction, so the element in focus should snap into place with a 20px distance to the left of the container. But instead, because of the direction value, the element in focus is offset by a 20px distance between child element and the right side of the container.</p>

<div id="container">
  <div class="blue">Blue</div>
  <div class="green">Green</div>
  <div class="blue">Blue</div>
  <div class="green">Green</div>
  <div class="blue">Blue</div>
  <div class="green">Green</div>
  <div class="blue">Blue</div>
</div>

</body>
</html>