W3Schools 试用编辑器 - W3Schools 中文教程

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

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

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

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