在两个表中隐藏垂直滚动条，但允许在一个表中完整滚动。

Question

我希望能够一起滚动整个表，但只有一个垂直滚动条在右边。(滚动可以通过使用右边的垂直滚动条，通过鼠标轮或箭头来完成)

我能够做到这一点，只不过我无法向.fixedTable-body隐藏垂直滚动条，当我使用鼠标轮或箭头在.fixedTable-sidebar和.fixedTable-body表上盘旋时，右边的垂直滚动条就会表现得很奇怪。

我所能做的：

• 在所有表体中实现并连接卷轴(在下面的工作小提琴中使用Js)；
• 在.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 */
}

我尝试过的：

• 用于webkit浏览器的伪类:vertical，但不起作用；

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

• 不确定这个-ms-overflow-y-style是否存在于IE中，但我尝试过，但也没有工作；

.fixedTable-body {
    -ms-overflow-y-style: none;
}

• 还试图用填充隐藏垂直滚动条，但无法做到。

​

​

编辑

我能够通过在两个元素中创建一个外部的.fixedTable-sidebar和.fixedTable-body来隐藏垂直滚动条并给它overflow: hidden，然后使内部元素.fixedTable-sidebar和.fixedTable-body的width > 100%稍微大一点

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

见更新的Fiddle

Answer 1

好吧，我找到了一个解决方案来隐藏表中间的垂直条，但是右边的垂直条仍然表现得很奇怪，但是为了防止有人需要它，这里就这样了:)

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

更新Fiddle ->只有一个垂直滚动条表和一个水平滚动条表(内有多个表和固定的标头)

P.S.：我将对垂直滚动条的奇怪行为提出另一个问题，然后我将在这里发布一个链接:)

Answer 2

好的，如果你想隐藏滚动条，但你希望仍然能够滚动。通常，它适用于我所说的现代浏览器(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;
}