6

I have looked into this issue and can not find a solution. The web site is a RTL site so I would like the scrollbars on the left. I have seen some hacks that can get this done except where I really need it.

The Tbody element of the table needs to scroll down without the header row disappearing. I can get the scrollbar on the right hand side of the tbody but have no idea how to move it to the left.

Any ideas how to get the TBody's scrollbar on the left hand side will be much appreciated.

I am lucky it only has to work on Google Chrome.

6
  • 1
    I assume you've tried using the CSS direction: rtl which moves the scrollbar in some browsers (I don't think it does in Chrome).
    – zdyn
    Feb 25, 2011 at 22:40
  • @ZDYN - Yes I have thanks - unfortunately it does not work.
    – user425445
    Feb 25, 2011 at 22:45
  • Specific to Firefox: The position of the vertical scrollbar is based on the localization of the client, and can not be changed purely with CSS. It can be overridden by changing layout.scrollbar.side to 1 in about:config, which will allow direction: rtl; to move the vertical scrollbar. Chrome may have a similar setting, but I'm not familiar with it.
    – drudge
    Feb 25, 2011 at 23:05
  • There is a jQuery solution (which, obviously, would require the jQuery library be linked as well as the plugin itself): jScrollPane demo. Feb 25, 2011 at 23:14
  • @David Thomas - Thanks for the link - It does not seem to address Tables and Tbody.
    – user425445
    Feb 25, 2011 at 23:42

3 Answers 3

1

It can't be changed with CSS. For example, there are browsers (iPhone, ANdroid) that don't have scroll bars. The scroll bar position depends entirely on the user's system, not the web page.

You can use Javascript to imitate what you want. Make a draggable scroll bar replacement, place it on the left, and adjust the hidden overflow according while the user drags the "scrollbar".

Try googling for "jquery scrollbar" or "javascript scrollbar".

Here's a an interesting alternative to scrolling... Dragging (similar to how you drag maps in google maps): http://plugins.jquery.com/project/MapScroller

And yet another alternative, here's a script that calculates the width of the users scroll bar: http://plugins.jquery.com/project/ba-jquery-scrollbarwidth-plugin You can calculate the width, then hide the scroll bar with overflow:hidden then add a div on the left with same height as the box you want to scroll and same width as the user's scrollbar, then write a script that scrolls the right box to the same position as the one on the left, thus imitating built in system scrollbars.

There's endless possibilities, just use google to find what you need and get creative. ;)

But, I think this is exactly what you're looking for: http://baijs.nl/tinyscrollbar/ As you can see in the examples, the scrollbar is made of elements. You can position them on the left if you'd like.

Perhaps that, along with this: http://plugins.jquery.com/project/tbodyscroll is EXACTLY what you need. ;)

Check this out, here's a working example: http://jsfiddle.net/trusktr/xQSxJ/

I'll update it soon to work with a table just for my own exercise. ;)

Often times you will only find partial solutions and will need to improvise to come up with a complete and unique solution. :) Good luck.

11
  • @trusktr - could you supply an example or a link to an explanation how to do what you recommend?
    – user425445
    Feb 25, 2011 at 23:47
  • @trusktr - I have voted your answer up for your effort and useful links. Please note that the solutions you presented do not solve my problem: A scrollbar on the left of a tables tbody, in a RTL page using Google Chrome.
    – user425445
    Feb 26, 2011 at 11:14
  • Julian, those links do indeed solve your problem (well, not directly). Here's how: Using tinyscrollbar allows you to use HTML/CSS to position your scrollbar on the left of anywhere you want.
    – trusktr
    Feb 27, 2011 at 8:23
  • I'd suggest you try to implement the sample at baijs.nl/tinyscrollbar and then try playing with the HTML and CSS to figure out how to put the scrollbar on the left.
    – trusktr
    Feb 27, 2011 at 8:24
  • As a matter of fact, if you are using Google Chrome, I'll show you how to see it in action. See the update in the answer.
    – trusktr
    Feb 27, 2011 at 8:27
1

As mentioned earlier. This is not a CSS issue, you could however, as trusktr stated, create a cusom javascript scrollbar. Basically you set it up something like this.

<div id="frame">
 <div id="scrollbar">
  Actual scrollbar
 </div>
 <div id="content">
  Content here
 </div>
</div>
<style>
 #frame {
 height: 400px;
 overflow: hidden;
}
</style>

Then you create a draggable object inside the scrollbar which position changes the relative position of the content inside the frame.

3
  • How does this apply to a Tbody element (Part of an HTML Table)? Will it work in Google Chrome?
    – user425445
    Feb 26, 2011 at 0:02
  • @Julian Is it possible to move the thead into a separate table and put it right above the frame to make it look like they are part of the same table, or maybe you could create the whole thing with divs and make it look like a table. If it really have to operate only on the tbody, I have no idea.
    – Zeta Two
    Feb 26, 2011 at 1:28
  • I prefer not to I will have to rewrite my site.
    – user425445
    Feb 26, 2011 at 11:11
1

For CSS use "direction:rtl;", however results may vary in different browsers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.