devpoint.cn

将垂直滚动条放置在相反的一侧：一般不建议这样做，因为它打破了人们对滚动条位置的强烈期望，滚动条对很多人都有用，更不用说对许多人来说都是核心可访问性功能。

但这是一个迷人的CSS技巧，而web是一个巨大的地方，有时需要奇怪的解决方案，其规模难以预料。

技巧一：Directional Trickery

这里的技巧是使用滚动父元素direction: rtl（或与主要方向相反），并使滚动元素的内部切换回法线。

下面是HTML

<div class="scrolling-area">
  <div class="scrolling-element-inside">
    <p>一个80后最美好的时光在深圳前行路上的点滴，从毕业开始一直探索发现程序世界、设计世界、互联网世界、现实世界、深圳的精彩内容，与深圳共同成长!</p>
    <p>一个80后最美好的时光在深圳前行路上的点滴，从毕业开始一直探索发现程序世界、设计世界、互联网世界、现实世界、深圳的精彩内容，与深圳共同成长!</p>
    <p>一个80后最美好的时光在深圳前行路上的点滴，从毕业开始一直探索发现程序世界、设计世界、互联网世界、现实世界、深圳的精彩内容，与深圳共同成长!</p>
  </div>
</div>

CSS代码：

.scrolling-area {
  max-width: 250px;
  max-height: 250px;
  overflow: auto;
  padding: 1rem;
  background: white;
  direction: rtl;
}

.scrolling-element-inside {
  direction: ltr;
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  background: antiquewhite;
}

技巧二：Rotational Trickery

出于非文本方向的目的而使用文本方向进行处理总是让我感到有些恐惧，因此此技巧不那么令人讨厌。诀窍是旋转父级180deg，然后将子级旋转回另一个父级，180deg以使其再次直立。

由于第一次旋转，滚动条最终在相反的一侧结束。还是上面的内容，修改CSS即可。

.scrolling-area {
  max-width: 250px;
  max-height: 250px;
  overflow: auto;
  padding: 1rem;
  background: white;
  transform: rotate(180deg);
}

.scrolling-element-inside {
  transform: rotate(-180deg);
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  background: antiquewhite;
}

这个原因特别尴尬，原因有二：

1. 默认情况下，滚动元素滚动到底部
2. 用滚轮感觉滚动方向相反。滚动条本身应具有预期的性能，但是触控板或鼠标滚轮会感觉到该元素的滚动方向已反转。