Horizontal scrolling a table

Question

On my webpage here I currently have a table which has too many columns and exceeds it's holder in x direction. In CSS I have it set up so that horizontal slider is shown and people can use it to navigate left/right across the table. This is achieved using overflow-x: auto; in CSS.

But slider looks outdated and Firefox doesn't support slider altering so far. That's why I decided that I want to disable the slider by altering overflow like this overflow-x: hidden;. This hid the slider away, but now I can't scroll my table left/right.

Are there any easy solutions that I can use to scroll the table left/right while my scrollbar remains hidden? Usage of mouse wheel or hold & pull actions would be completely fine.

This only works if scrollbar isn't hidden. When I hide it it doesn't work anymore. Also it isn't convenient to hold SHIFT key. — 71GA, Jan 24 '16 at 15:58
Possible duplicate of [Hide scroll bar, but still being able to scroll](http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll) — Asons, Jan 24 '16 at 16:06
It is not. That question only focuses on **vertical mouse wheel scrolling**. This one is **horizontal** and I am not focusing only on mouse wheel - I am also interested in hold and pull scrolling... — 71GA, Jan 24 '16 at 16:23

Asons · Accepted Answer · 2016-01-24T17:00:32.107

This one works for horizontal as if it would have visible scrollbar

Update: Added a dragscroll script

Src: http://qnimate.com/javascript-scroll-by-dragging/

#container1{
    height: 50px;
    width: 200px;
    border: 1px solid;
    overflow: hidden;
}

#container2{
    width: 100%;
    height: 99%;
    overflow: auto;
    white-space: nowrap;
    padding-bottom: 25px;   /* push scrollbar out of sight */
    margin-top: 15px;
    cursor:move;
}

<script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>

<div id="container1"><div class="dragscroll" id="container2">
    hello 1
    hello 2
    hello 3
    hello 4
    hello 5
    hello 6
    hello 7
</div><div>

Horizontal scrolling a table

1 Answers1