How to Position a Div Scrollbar on the Left Hand Side

  .list_container {
    direction: rtl;
    overflow:auto;
    height: 50px;
    width: 50px;
  }

  .item_direction {
    direction:ltr;
  }

<div class="list_container">
  <div class="item_direction">1</div>
  <div class="item_direction">2</div>
  <div class="item_direction">3</div>
  <div class="item_direction">4</div>
  <div class="item_direction">5</div>
  <div class="item_direction">6</div>
  <div class="item_direction">7</div>
  <div class="item_direction">8</div>
  <div class="item_direction">9</div>
  <div class="item_direction">10</div>
  <div class="item_direction">11</div>
  <div class="item_direction">12</div>
</div>

how to move scrollbar from left to right in css?

Change direction from rtl to ltr in #font6 style.

For instance,

#font6 {
    direction: ltr;
    display: block;
    height: 218px;
    overflow: auto;
    position: absolute;
    right: 76px;
    top: 15px;
    width: 58%;
}

This will solve your issue.

Hope this Helps.

How to move a scrollbar together with the left position of its div (possibly with React)

After pursuing this quest for another couple of days, I haven't been able to find examples of React hooks that are able to detect/manage the scroll of individual components in page, let alone horizontal scroll.

I have solved my problem by leaving CSS aside and putting in place a JS/DOM-based solution, catering to the Element methods that control scroll.

These React solutions are all based on using a useRef hook tied to the page Element that is to be controlled, and accessing its methods through the current property of the reference.

The main drawback of these solutions is that (regardless of what the standards seem to promise) I cannot exploit CSS easing functions to implement a smooth scroll transition: for that I was forced to use a setInterval/setTimeout solution to perform many partial scrolls of my component.

Changing scroll bar to the left of a div

use dir="rtl" to give direction to the text. The scrollbars will appear to the left.

Then use dir="ltr" to the inside elements such as p, div etc to nullify the effect. This way, dir="rtl"

Here is the fiddle - http://jsfiddle.net/ashwyn/dcLQQ/

I works in Firefox though, but in my chrome it doesn't.

[Edit]

Below is the fiddle to shift the scrollbar slightly to the left-

http://jsfiddle.net/ashwyn/fPGy8/1/

I don't think there is any other solution that you can fix apart from the above.

How to change scroll bar position with CSS?

Using CSS only:

Right/Left Flippiing: Working Fiddle

.Container
{
    height: 200px;
    overflow-x: auto;
}
.Content
{
    height: 300px;
}

.Flipped
{
    direction: rtl;
}
.Content
{
    direction: ltr;
}

Top/Bottom Flipping: Working Fiddle

.Container
{
    width: 200px;
    overflow-y: auto;
}
.Content
{
    width: 300px;
}

.Flipped, .Flipped .Content
{
    transform:rotateX(180deg);
    -ms-transform:rotateX(180deg); /* IE 9 */
    -webkit-transform:rotateX(180deg); /* Safari and Chrome */
}

---

Related Topics