隐藏2个表中的垂直滚动条，但允许在一个表中完全滚动

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.

我能够做到这一点,除了我无法隐藏.fixedTable体的垂直滚动条,当我使用鼠标滚轮或箭头悬停.fixedTable-sidebar和.fixedTable-body表时,右边的垂直滚动条只是表现得很奇怪。

What I was able to do:

我能做什么:

Implement and connect the scroll in all tables body (Js in working fiddle below);

在所有表体中实现并连接滚动(下面的工作小提琴中的Js);
Hide vertical scrollbar in .fixedTable-sidebar for Webkit browsers and IE (haven't found solution to hide for FF) --> this was done by:

在.fixedTable-sidebar中隐藏Webkit浏览器和IE的垂直滚动条(没有为FF隐藏解决方案) - >这是通过以下方式完成的:

.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 :vertical for webkit browsers, but doesn't work;

伪类:webkit浏览器的垂直,但不起作用;

.fixedTable-body::-webkit-scrollbar:vertical {
    display: none;
}

Not sure if this -ms-overflow-y-style exists for IE, but I tried and doesn't work either;

不确定这个-ms-overflow-y-style是否存在于IE中,但我尝试过并且也不起作用;

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

我能够通过在两个元素中创建一个外部div并给它溢出来隐藏垂直滚动条:.fixedTable-sidebar和.fixedTable-body。隐藏,然后使内部元素.fixedTable-sidebar和.fixedTable-body略宽一些> 100% - >有了这个我能够隐藏所有浏览器的滚动条。

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)

现在唯一的问题是在.fixedTable-sidebar和.fixedTable-body(通过使用鼠标滚轮或键盘箭头)上滚动时右侧垂直滚动条的行为

See Updated Fiddle

查看更新的小提琴

2 个解决方案

#1

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

好吧,如果你想隐藏滚动条,但你仍然想要滚动。通常,它适用于我所谓的现代浏览器(Safari,Chrome和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;
}

#2

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

我能够通过在两个元素中创建一个外部div并给它溢出来隐藏垂直滚动条:.fixedTable-sidebar和.fixedTable-body。隐藏,然后使内部元素.fixedTable-sidebar和.fixedTable-body略宽一些> 100% - >有了这个我能够隐藏所有浏览器的滚动条 - >所以这是一个跨浏览器的解决方案

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

更新的小提琴 - >仅1个垂直和1个水平滚动条表(内部有多个表格和固定标题)

P.S.: I will open another question regarding the weird behaviour of the vertical scrollbar, then I'll post a link here :)

P.S。:我将打开关于垂直滚动条的奇怪行为的另一个问题,然后我将在这里发布链接:)

#1