0
600
ViewsHide vertical scrollbar in 2 tables, but allow full scroll in one table
I want to be able to scroll the whole table together, but having just one vertical scrollbar at the right. (The scroll can be done by using the vertical scrollbar at the right, through mousewheel or arrows)
I was able to do that, except that I can't hide the vertical scrollbar from the .fixedTable-body and when I use the mousewheel or arrows hover the .fixedTable-sidebar and .fixedTable-body tables, the vertical scrollbar at the right just acts weird.
What I was able to do:
Implement and connect the scroll in all tables body (Js in working fiddle below);
Hide vertical scrollbar in
.fixedTable-sidebarfor Webkit browsers and IE (haven't found solution to hide for FF) --> this was done by:
.fixedTable-sidebar::-webkit-scrollbar {
display: none; /* hide scrollbar for Webkit Browsers */
}
.fixedTable-sidebar {
-ms-overflow-style: none; /* hide scrollbar for IE */
}
What I have tried:
- the pseudo class
:verticalfor webkit browsers, but doesn't work;
.fixedTable-body::-webkit-scrollbar:vertical {
display: none;
}
- Not sure if this
-ms-overflow-y-styleexists for IE, but I tried and doesn't work either;
.fixedTable-body {
-ms-overflow-y-style: none;
}
- Also tried to hide the vertical scrollbar with padding, but wasn't able to do it.
EDIT
I was able to hide the vertical scrollbars from .fixedTable-sidebar and .fixedTable-body by creating an outer div in both elements and giving it overflow: hidden, then make the inner elements .fixedTable-sidebar and .fixedTable-body slightly bigger width > 100% --> with this I was able to hide the scrollbars for all browsers.
Now the only problem is the behaviour of the right vertical scrollbar when scroll over the .fixedTable-sidebar and .fixedTable-body (by using the mouse wheel or the keypad arrows)
2 answers
Answer question0
Ok, if you want to hide the scroll bar, but you want to be still able to scroll. Normally, it will work for what I'm calling modern browsers (Safari, Chrome and Opera) :
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
0
Well, I found a solution to hide the vertical bar at the middle of the table, but the vertical bar from the right still acts weird, but here it goes in case someone needs it :)
I was able to hide the vertical scrollbars from .fixedTable-sidebar and .fixedTable-body by creating an outer div in both elements and giving it overflow: hidden, then make the inner elements .fixedTable-sidebar and .fixedTable-body slightly bigger width > 100% --> with this I was able to hide the scrollbars for all browsers --> so it's a cross-browser solution
Updated Fiddle --> Only 1 vertical and 1 horizontal scrollbar table (with multiple tables inside and fixed header)
P.S.: I will open another question regarding the weird behaviour of the vertical scrollbar, then I'll post a link here :)