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

时间:2017-03-22 15:53:14

标签: javascript jquery html css

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

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

我能做什么:

  • 在所有表格中实现并连接滚动( Js in work fiddle below );

  • 隐藏.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;
}
  • 不确定IE是否存在此-ms-overflow-y-style,但我尝试过并且也无效;
.fixedTable-body {
    -ms-overflow-y-style: none;
}
  • 还尝试使用填充隐藏垂直滚动条,但无法执行此操作。

Explanatory Image

修改

我可以隐藏.fixedTable-sidebar.fixedTable-body的垂直滚动条,方法是在两个元素中创建一个外部div并赋予它overflow: hidden,然后创建内部元素{ {1}}和.fixedTable-sidebar略大.fixedTable-body - >有了这个,我能够隐藏所有浏览器的滚动条。

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

See Updated Fiddle

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

好吧,我找到了一个解决方案来隐藏桌子中间的垂直条,但右边的垂直条仍然很奇怪,但这里有人需要它:)

我可以隐藏.fixedTable-sidebar.fixedTable-body中的垂直滚动条,方法是在两个元素中创建一个外部div并赋予它overflow: hidden,然后创建内部元素.fixedTable-sidebar.fixedTable-body略大width > 100% - >有了这个我能够隐藏所有浏览器的滚动条 - > 所以它是一个跨浏览器的解决方案

Updated Fiddle - >只有1个垂直和1个水平滚动条表(内部有多个表格和固定标题)

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