Div Vertical Scroll Bar on Left

DIV Vertical Scroll bar on left

You can add a pseudo-scrollbar anywhere you want with JQuery and this plug-in: JScrollPane

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>

Scrollbar on the left

You could use the direction property,

direction: rtl;

Set direction: rtl on the parent element and direction: ltr on the child element:

.leftscrollbar {  height: 100px;  overflow: auto;  direction: rtl;}
.leftscrollbar>div {  direction: ltr;}

<div class="leftscrollbar">  <div>    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum fusce ut placerat orci nulla pellentesque dignissim enim sit. Pretium quam vulputate dignissim suspendisse in est ante. Purus sit amet luctus venenatis lectus. Integer vitae justo eget magna fermentum. Neque egestas congue quisque egestas diam in arcu cursus euismod. Orci nulla pellentesque dignissim enim sit amet. Pulvinar pellentesque habitant morbi tristique senectus et netus. Sit amet dictum sit amet justo donec enim. Ultrices sagittis orci a scelerisque purus semper eget duis. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Elementum curabitur vitae nunc sed. Adipiscing commodo elit at imperdiet dui. Adipiscing elit pellentesque habitant morbi tristique senectus et. Bibendum arcu vitae elementum curabitur vitae nunc sed velit. Lobortis mattis aliquam faucibus purus in massa tempor nec. Curabitur vitae nunc sed velit dignissim sodales. Aliquet nibh praesent tristique magna sit amet purus. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Turpis massa tincidunt dui ut ornare lectus sit. Neque vitae tempus quam pellentesque. Elit at imperdiet dui accumsan sit amet nulla facilisi. Tempus egestas sed sed risus pretium. Eget gravida cum sociis natoque penatibus et. Amet massa vitae tortor condimentum lacinia quis vel. Sapien et ligula ullamcorper malesuada.   </div></div>

HTML element scrollbar on the left

If you want the direction to be left-to-right, but still want to violate every expectation a user has to scrollbars, then you can hack it using javascript.

Simply create a 1px wide div on the left side of your content. Have it be the same height as the content which you want to scroll. Then hook up an onscroll event to that div and whenever the user scrolls that div, you can scroll the content area manually.

Some further tips: main content area needs to have overflow:hidden and you can use negative values for margin-top to fake the scrolling.

Making a div vertically scrollable using CSS

You have it covered aside from using the wrong property. The scrollbar can be triggered with any property overflow, overflow-x, or overflow-y and each can be set to any of visible, hidden, scroll, auto, or inherit. You are currently looking at these two:

• auto - This value will look at the width and height of the box. If they are defined, it won't let the box expand past those boundaries. Instead (if the content exceeds those boundaries), it will create a scrollbar for either boundary (or both) that exceeds its length.

• scroll - This values forces a scrollbar, no matter what, even if the content does not exceed the boundary set. If the content doesn't need to be scrolled, the bar will appear as "disabled" or non-interactive.

If you always want the vertical scrollbar to appear:

You should use overflow-y: scroll. This forces a scrollbar to appear for the vertical axis whether or not it is needed. If you can't actually scroll the context, it will appear as a"disabled" scrollbar.

If you only want a scrollbar to appear if you can scroll the box:

Just use overflow: auto. Since your content by default just breaks to the next line when it cannot fit on the current line, a horizontal scrollbar won't be created (unless it's on an element that has word-wrapping disabled). For the vertical bar,it will allow the content to expand up to the height you have specified. If it exceeds that height, it will show a vertical scrollbar to view the rest of the content, but will not show a scrollbar if it does not exceed the height.

---

Related Topics