StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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.</p> <p>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".</p> <p>Try googling for "jquery scrollbar" or "javascript scrollbar".</p> <p>Here's a an interesting alternative to scrolling... Dragging (similar to how you drag maps in google maps): <a href="http://plugins.jquery.com/project/MapScroller" rel="nofollow">http://plugins.jquery.com/project/MapScroller</a></p> <p>And yet another alternative, here's a script that calculates the width of the users scroll bar: <a href="http://plugins.jquery.com/project/ba-jquery-scrollbarwidth-plugin" rel="nofollow">http://plugins.jquery.com/project/ba-jquery-scrollbarwidth-plugin</a> 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.</p> <p>There's endless possibilities, just use google to find what you need and get creative. ;)</p> <p>But, I think this is exactly what you're looking for: <a href="http://baijs.nl/tinyscrollbar/" rel="nofollow">http://baijs.nl/tinyscrollbar/</a> As you can see in the examples, the scrollbar is made of elements. You can position them on the left if you'd like.</p> <p>Perhaps that, along with this: <a href="http://plugins.jquery.com/project/tbodyscroll" rel="nofollow">http://plugins.jquery.com/project/tbodyscroll</a> is EXACTLY what you need. ;)</p> <p><strong>Check this out, here's a working example:</strong> <a href="http://jsfiddle.net/trusktr/xQSxJ/" rel="nofollow">http://jsfiddle.net/trusktr/xQSxJ/</a></p> <p>I'll update it soon to work with a table just for my own exercise. ;)</p> <p>Often times you will only find partial solutions and will need to improvise to come up with a complete and unique solution. :) Good luck.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload