is there a way for me to make a custom scrollbar appear on the left instead of the right?-CodePudding

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 right side, but I want to move it over to the left. Is this possible?

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 >
  <div >
    <div id="SEP3"></div>
    <div id="words">Documentation</div>
    <div id="ICON_1"><i ></i></div>
    <script>
      $(document).ready(function() {
        $('#words').click(function(event) {
          event.preventDefault();
          $(".DOC_CONTAINER").toggleClass('expanded');
          $("#ICON_1").toggleClass("flip");
        });
      });
    </script>
    <div >
      <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 >
    <div id="SEP5"></div>
    <div id="words2">WebVar</div>
    <div id="ICON_2"><i ></i></div>
    <script>
      $(document).ready(function() {
        $('#words2').click(function(event) {
          event.preventDefault();
          $(".WEBVAR_CONTAINER").toggleClass('EXPAND');
          $("#ICON_2").toggleClass("flip2");
        });
      });
    </script>
    <div >
      <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>

I tried setting float but that didn't work. If there is a solution please enlighten me.

CodePudding user response：

Easy way to move scrollbar to the left side:

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

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

<div >
  <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>

CodePudding user response：

You can set the div to right text align and the text to left text align.

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

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

<div >
  <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>