DIV Vertical scroll bar left

Question

Is it possible to put a DIV vertical scrollbar to the left of a div using css? how about jscript?

Answer 1

You can add pseudo scroll anywhere with jQuery and this plugin: JScrollPane

Answer 2

I had a simple usage example, so you chose a simple css solution:

<div style="direction: rtl; height: 250px; overflow: scroll;"> <div style="direction: ltr; padding: 3px;"> Content goes here </div> </div> 

Answer 3

Ok, therefore, I wrote a jQuery plugin to give you a completely natural left scroll bar.

Left scroll demonstration left scroll bar

Here's how it works:

• Insert an inner div inside the panel to enable the calculation of the width of the content ( content_width ). Then, using this, you can calculate the width of the scrollbar: scrollbar_width = parent_width - content_width - horizontal_padding .

• Make two different divs inside the panel, filled with content.

  • One of the goals is "poseur." It was used exclusively for the scrollbar. Using the negative left margin, the plugin pulls it to the left, so that only the scroll bar is displayed (the contents of this div cropped at the edge).

  • Another div used to actually position the visible scroll content.

• Now it's time to link the two. Every 50 ms ( window.setInterval ), the scrollTop offset from the "poser" div is applied to the visible, scrollable div content. So, when you scroll up or down using the scroll bar on the left, the scroll offset moves back to the div with visible content.

This explanation probably sucks, and in fact it is a little more than I did not 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 have included jQuery and this plugin on the page, apply the left scroll bar:

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

Replace #scrollme CSS selector for the element (s) that you want to apply to the left scroll bar.

(and obviously it is getting worse nicely)