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