DIV Vertical Scroll bar on left

Question

Is it possible to put DIV's Vertical Scroll bar on left of the div with css? what about jscript?

Answer 1

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

Answer 2

Okay, so, I wrote a jQuery plugin to give you a completely-native-looking left scroll bar.

Left Scrollbar Hack Demo

Here's how it works:

1. Inject an inner div inside the pane to allow calculation of the content width (content_width). Then, using this, the native scrollbar width can be calculated: scrollbar_width = parent_width - content_width - horizontal_padding .

2. Make two different divs inside the pane, both filled with the content.

   • One's purpose is being a "poser". It's used solely for the scrollbar. Using a negative left margin, the plugin pulls it left so that only the scrollbar is in view (the content of this div is clipped off at the edge).

   • The other div is used to actually house the visible scrolling content.

3. Now, it's time to bind the two together. Every 50ms (window.setInterval), the scrollTop offset from the "poser" div is applied to the visible, scrolling content div. So, when you scroll up or down with the scrollbar on the left, the scroll offset gets applied back on the div with the visible content.

This explanation probably sucks and there's actually a quite a bit more to it that I didn't describe, but, without further ado, here it is:

$.fn.leftScrollbar = function(){
    var items = $(this);
    $(function(){
     items.each(function(){
      var e = $(this);
      var content = e.html();
      var ie = !jQuery.support.boxModel;
      var w = e[ie?'innerWidth':'width'](), h = e[ie?'innerHeight':'height']();
      //calculate paddings
      var pad = {};
      $(['top', 'right', 'bottom', 'left']).each(function(i, side){
       pad[side] = parseInt(e.css('padding-' + side).replace('px',''));
      });
      //detect scrollbar width
      var xfill = $('<div>').css({margin:0, padding:0, height:'1px'});
      e.append(xfill);
      var contentWidth = xfill.width();
      var scrollerWidth = e.innerWidth() - contentWidth - pad.left - pad.right;
      e.html('').css({overflow:'hidden'});
      e.css('padding', '0');

      var poserHeight = h - pad.top - pad.bottom;
      var poser = $('<div>')
       .html('<div style="visibility:hidden">'+content+'</div>')
       .css({
        marginLeft: -w+scrollerWidth-(ie?0:pad.left*2),
        overflow: 'auto'
       })
       .height(poserHeight+(ie?pad.top+pad.bottom:0))
       .width(w);

      var pane = $('<div>').html(content).css({
       width: w-scrollerWidth-(ie?0:pad.right+pad.left),
       height: h-(ie?0:pad.bottom+pad.top),
       overflow: 'hidden',
       marginTop: -poserHeight-pad.top*2,
       marginLeft: scrollerWidth
      });

      $(['top', 'right', 'bottom', 'left']).each(function(i, side){
        poser.css('padding-'+side, pad[side]);
        pane.css('padding-'+side, pad[side]);
      });
      e.append(poser).append(pane);

      var hRatio = (pane.innerHeight()+pad.bottom) / poser.innerHeight();
      window.setInterval(function(){
       pane.scrollTop(poser.scrollTop()*hRatio);
      }, 50);
     });
    });
};

Once you've included jQuery and this plugin in the page, apply the left scroll bar:

$('#scrollme').leftScrollbar();

Replace #scrollme with the CSS selector to the element(s) you wish to apply left scrollbars to.

(and, obviously, this degrades nicely)