How do I position a left scrollbar on a tbody elem

问题:

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.

回答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.

回答2:

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:

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