Question 36015 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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

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

Tags:

2

Answers


  1. 0

    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 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>
    Login or Signup to reply.
  2. 0

    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 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search