Clever Geek Handbook

Hide vertical scrollbar in 2 tables, but allow full scrolling in one table

I want to be able to scroll the whole table together, but with only one vertical scrollbar on the right. (Scrolling can be done with the vertical scroll bar on the right, through the wheel or arrows)

I was able to do this, except that I cannot hide the vertical scrollbar from .fixedTable-body

, and when I use the mouse wheel or arrows, hover over the tables .fixedTable-sidebar

and the .fixedTable-body

vertical scrollbar on the right just acts strangely.

What could I do:

  • Implement and connect the rollout in all table bodies (Js in the working script below);

  • Hide vertical scrollbar in .fixedTable-sidebar

    for Webkit and IE browsers (didn't find a solution for hide for FF) -> this was done:

.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:

  • pseudo-class :vertical

    for web browsers, but doesn't work;
.fixedTable-body::-webkit-scrollbar:vertical {
    display: none;
}
  • Not sure if this one -ms-overflow-y-style

    exists for IE, but I tried it too and doesn't work;
.fixedTable-body {
    -ms-overflow-y-style: none;
}
  • Also tried to hide the vertical scrollbar with padding but couldn't do it.

Explanatory picture

EDIT

I was able to hide the vertical scrollbars from .fixedTable-sidebar

and .fixedTable-body

by creating an outer element div

in both elements and giving it overflow: hidden

and then make the inner elements .fixedTable-sidebar

and a .fixedTable-body

little big -> width > 100%

with this I was able to hide the scrollbars for all browsers.

Now the only problem is the behavior of the right vertical scrollbar when scrolling through .fixedTable-sidebar

and .fixedTable-body

(using the mouse wheel or keyboard arrows)

See the updated script

+3


source to share


2 answers


Well I found a solution to hide the vertical bar in the middle of the table, but the vertical bar on the right still acts weird, but here it goes in case anyone 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

and then make the inner elements .fixedTable-sidebar

and a .fixedTable-body

little big -> width > 100%

with that I was able to hide the scrollbars for all browsers -> so this is a cross browser solution



Updated Fiddle -> Only 1 vertical and 1 horizontal scroll table (with multiple tables inside and fixed title)

PS: I'll open up another question about the strange behavior of the vertical scrollbar, then post the link here :)

0


source


It's good if you want to hide the scrollbar, but you want it to be still scrollable. This will usually work for what I call 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;
}
+1


source






More articles:


All Articles