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-end: 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 end;
}
</style>
</head>
<body>

<h3>CSS scroll-padding-inline-end property.</h3>
<p>With the direction property value set to rtl the end of the element in the inline direction is changed from the right side to the left side, and this also affects the scroll-padding-inline-end property.</p>
<p>In this example, snap position is set to end in the inline direction, so the element in focus should snap into place with a 20px distance to the right 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 left 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>