是否有一种方法可以使一个自定义滚动条出现在左边而不是右边？

Question

我有一个菜单的div，它的溢出-x设置为隐藏。这样，当内容溢出到div之外时，滚动条就会出现。目前滚动条只在右边，但我想把它移到左边。这个是可能的吗？

​

body::-webkit-scrollbar {
  width: 0px;
}

body::-webkit-scrollbar-track {
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 20px;
  border: 3px solid transparent;
}

.CONT {
  position: relative;
  top: -25px;
  left: 20px;
}

.CONT_2 {
  position: relative;
  top: 25px;
  left: 20px;
  height: 100px;
}

#words {
  top: -2px;
  left: 25px;
  position: relative;
}

#words2 {
  top: 2px;
  left: 25px;
  position: relative;
}

.DOC_CONTAINER {
  font-size: 20px;
  font-family: Verdana;
  font-weight: bold;
  position: relative;
  top: 16px;
  left: -4px;
  color: #0088FF;
  user-select: none;
  cursor: pointer;
  width: 280px;
  z-index: 1;
  overflow: hidden;
  height: 46px;
}

#HTML_DOC {
  font-size: 18px;
  font-family: Verdana;
  font-weight: bold;
  position: relative;
  top: 75px;
  left: 15px;
}

#CSS_DOC {
  font-size: 18px;
  font-family: Verdana;
  font-weight: bold;
  position: relative;
  top: 125px;
  left: 15px;
}

#JAVA_DOC {
  font-size: 18px;
  font-family: Verdana;
  font-weight: bold;
  position: relative;
  top: 175px;
  left: 15px;
}

#JQUERY_DOC {
  font-size: 18px;
  font-family: Verdana;
  font-weight: bold;
  position: relative;
  top: 225px;
  left: 15px;
}

#LUA_DOC {
  font-size: 18px;
  font-family: Verdana;
  font-weight: bold;
  position: relative;
  top: 275px;
  left: 15px;
}

#ICON_1 {
  position: absolute;
  top: 0px;
  left: 200px;
}

#icon2 {
  position: absolute;
  top: 2px;
  left: 180px;
}

#ICON_2 {
  position: absolute;
  top: 4px;
  left: 118px;
}

#icon3 {
  position: absolute;
  top: 2px;
  left: 100px;
}

div.DOC_CONTAINER.expanded {
  width: 390px;
  height: 395px;
  top: 16px;
  left: -4px;
  position: relative;
  animation-name: Expand1;
  animation-duration: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

div.WEBVAR_CONTAINER.EXPAND {
  width: 390px;
  height: 395px;
  top: 35px;
  left: -4px;
  position: relative;
  animation-name: Expand2;
  animation-duration: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes Expand2 {
  0% {
    height: 70px;
  }
  100% {
    height: 280px;
  }
}

@keyframes Expand1 {
  0% {
    height: 70px;
  }
  100% {
    height: 421px;
  }
}

#SEP2 {
  width: 390px;
  height: 1px;
  background-color: #2e2e2e;
  position: absolute;
  top: 65px;
  left: -27px;
}

#SEP3 {
  width: 390px;
  height: 1px;
  background-color: #2e2e2e;
  position: relative;
  top: 420px;
  left: -27px;
}

#SEP4 {
  width: 370px;
  height: 1px;
  background-color: #2e2e2e;
  position: absolute;
  top: 135px;
  left: 0px;
}

#SEP5 {
  width: 390px;
  height: 1px;
  background-color: #2e2e2e;
  position: relative;
  top: 420px;
  left: -27px;
}

#CREDITS {
  font-size: 20px;
  font-family: Verdana;
  font-weight: bold;
  position: relative;
  top: 30px;
  left: 20px;
}

#ABOUT {
  font-size: 20px;
  font-family: Verdana;
  font-weight: bold;
  position: absolute;
  top: 100px;
  left: 20px;
}

#COPY_RIGHT {
  font-size: 20px;
  font-family: Verdana;
  font-weight: bold;
  position: absolute;
  top: 170px;
  left: 20px;
}

div.scroll {
  margin: 4px, 4px;
  padding: 4px;
  background-color: #1f1f1f;
  width: 350px;
  height: 85vh;
  top: 127px;
  left: -5px;
  position: absolute;
  overflow-x: hidden;
  text-align: justify;
  border-bottom-right-radius: 20px;
}

.scroll::-webkit-scrollbar {
  width: 5px;
  color: #0088FF;
  height: 25px;
}

.scroll::-webkit-scrollbar-track {
  background: #2e2e2e;
}

.scroll::-webkit-scrollbar-thumb {
  background: #0088FF;
}

.scroll::-webkit-scrollbar-thumb:hover {
  background: #0088FF;
}

.flip {
  transform: rotateX(180deg);
  transition-duration: 0.2s;
}

.flip2 {
  transform: rotateX(180deg);
  transition-duration: 0.2s;
}

#MENU_LABEL {
  color: #2E2E2E;
  top: 11px;
  left: 45vw;
  position: absolute;
  font-size: 20px;
  font-family: verdana;
}

body {
  height: 200vh;
  background-color: #2E2E2E;
}

a {
  color: #0088ff;
  text-decoration: none;
}

a:hover {
  color: #0056A3;
  text-decoration: none;
}

.WEBVAR_CONTAINER {
  font-size: 20px;
  font-family: Verdana;
  font-weight: bold;
  position: relative;
  top: 35px;
  left: -4px;
  color: #0088FF;
  user-select: none;
  cursor: pointer;
  width: 390px;
  z-index: 1;
  overflow: hidden;
  height: 70px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="scroll">
  <div class="DOC_CONTAINER">
    <div id="SEP3"></div>
    <div id="words">Documentation</div>
    <div id="ICON_1"><i class="fa-solid fa-angle-down"></i></div>
    <script>
      $(document).ready(function() {
        $('#words').click(function(event) {
          event.preventDefault();
          $(".DOC_CONTAINER").toggleClass('expanded');
          $("#ICON_1").toggleClass("flip");
        });
      });
    </script>
    <div class="CONT">
      <div id="HTML_DOC"><a href="/Users/1001891/Desktop/webVar/Content/DocOverview/HTMLDoc/htmlDocumentation.html">HTML</a></div>
      <div id="CSS_DOC"><a href="/Users/1001891/Desktop/webVar/Content/DocOverview/CSSDoc/cssdocumentation.html">CSS</a></div>
      <div id="JAVA_DOC"><a href="/Users/1001891/Desktop/webVar/Content/DocOverview/JSDoc/javascriptdocumentation.html">Javascript</a></div>
      <div id="JQUERY_DOC"><a href="/Users/1001891/Desktop/webVar/Content/DocOverview/JSDoc/jquerydocumentation.html">Jquery</a></div>
      <div id="LUA_DOC"><a href="/Users/1001891/Desktop/webVar/Content/DocOverview/LUADoc/luadocumentation.html">Lua</a></div>
    </div>
  </div>
  <div id="SEP2"></div>
  <div class="WEBVAR_CONTAINER">
    <div id="SEP5"></div>
    <div id="words2">WebVar</div>
    <div id="ICON_2"><i class="fa-solid fa-angle-down"></i></div>
    <script>
      $(document).ready(function() {
        $('#words2').click(function(event) {
          event.preventDefault();
          $(".WEBVAR_CONTAINER").toggleClass('EXPAND');
          $("#ICON_2").toggleClass("flip2");
        });
      });
    </script>
    <div class="CONT_2">
      <div id="CREDITS"><a href="/Users/1001891/Desktop/webVar/Content/ABT/credits.html">Credits</a></div>
      <div id="ABOUT"><a href="/Users/1001891/Desktop/webVar/Content/ABT/about.html">About</a></div>
      <div id="COPY_RIGHT"><a href="/Users/1001891/Desktop/webVar/Content/COPY/copyright.html">Copyright</a></div>
    </div>
  </div>
  <div id="SEP4"></div>
</div>

​

我试过设置浮点数，但那没有效果。如果有解决办法，请指点我。

Answer 1

您可以将div设置为右文本对齐，将文本设置为左文本对齐。

​

.scroll-at-left {
  width: 200px;
  height: 95vh;
  overflow-y: scroll;
  direction: rtl; 
}

.scroll-at-left section {
 padding: 0 1em;
 direction: ltr; 
}

<div class="scroll-at-left">
  <section>
    <p>The scroll bar should be on the left side now when you scroll. The section is set to left text align while the div is set to right text align. This is just filler text. It has no purpose other than to fill. This is even more filler text. Why are you reading this</p>
  </section>
</div>

​

Answer 2

将滚动条移动到左侧的简单方法：

​

.scroll-at-left {
  width: 200px;
  height: 95vh;
  overflow-y: scroll;
  transform: rotateY(180deg);
}

.scroll-at-left>section {
  padding: 0 1em;
  transform: rotateY(180deg);
}

<div class="scroll-at-left">
  <section>
    <p>I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the left side, but I want to move it over to the right. Is this possible?</p>
    <p>I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the left side, but I want to move it over to the right. Is this possible?</p>
  </section>
</div>

​