W3Schools Tryit 编辑器 - W3Schools 中文教程

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  width: 50%;
  aspect-ratio: 1;
  margin: auto;
  border: solid black 2px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
  direction: rtl;
  scroll-padding-right: 30px;
}
      
#container > div {
  display: inline-block;
  margin: 2px;
  scroll-snap-align: none end;
}

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

.blue {
  background-color: lightblue;
  height: 80%;
  aspect-ratio: 3/4;
}
</style>
</head>
<body>

<h3>CSS scroll-padding-right with altered snap position.</h3>
<p>Snap position must be placed on right of the child elements for scroll-padding-right to work. On pages written in English the snap position can normally be set on right side of child elements by setting scroll-snap-align to "none end" because inline direction is left to right. But, if we change the inline direction with the direction property value set to "rtl", the snap position changes from the right side to left side of the child elements. With the code like this the scroll-padding-right property no longer works.</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 class="green">Green</div>
</div>

</body>
</html>