W3Schools 试用编辑器 - 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-left: 30px;
}
      
#container > div {
  display: inline-block;
  margin: 2px;
  scroll-snap-align: none start;
}

.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-left with altered snap position.</h3>
<p>Snap position must be placed on left of the child elements for scroll-padding-left to work. On pages written in English the snap position can normally be set on left of child elements by setting scroll-snap-align to "none start" 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 left side to right side of the child elements. With the code like this the scroll-padding-left 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>