Quiero poder desplazar toda la tabla, pero tener solo una barra de desplazamiento vertical a la derecha. (El desplazamiento se puede hacer usando la barra de desplazamiento vertical a la derecha, a través de la rueda del mouse o las flechas)

Pude hacer eso, excepto que no puedo ocultar la barra de desplazamiento vertical de .fixedTable-body y cuando uso la rueda del mouse o las flechas sobre las .fixedTable-sidebar y .fixedTable-body , la barra de desplazamiento vertical a la derecha simplemente actúa raro.

Lo que pude hacer:

• Implemente y conecte el desplazamiento en el cuerpo de todas las tablas ( Js en el violín de trabajo a continuación );

• Oculte la barra de desplazamiento vertical en .fixedTable-sidebar para navegadores Webkit e IE ( no he encontrado una solución para ocultar para FF ) --> esto fue hecho por:

 .fixedTable-sidebar::-webkit-scrollbar { display: none; /* hide scrollbar for Webkit Browsers */ } .fixedTable-sidebar { -ms-overflow-style: none; /* hide scrollbar for IE */ }

Lo que he probado:

• la pseudo clase :vertical para navegadores webkit, pero no funciona;

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

• No estoy seguro de si este -ms-overflow-y-style existe para IE, pero lo intenté y tampoco funcionó;

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

• También intenté ocultar la barra de desplazamiento vertical con relleno, pero no pude hacerlo.

EDITAR

Pude ocultar las barras de desplazamiento verticales de .fixedTable-sidebar y .fixedTable-body al crear un div externo en ambos elementos y darle overflow: hidden , luego hacer que los elementos internos .fixedTable-sidebar y .fixedTable-body un width > 100% ligeramente mayor width > 100% --> con esto pude ocultar las barras de desplazamiento para todos los navegadores.

Ahora el único problema es el comportamiento de la barra de desplazamiento vertical derecha cuando se desplaza sobre .fixedTable-sidebar y .fixedTable-body (usando la rueda del mouse o las flechas del teclado)

Ver violín actualizado