我希望能够将整个表格一起滚动,但右边只有一个垂直滚动条。 (可以使用右侧的垂直滚动条,通过鼠标滚轮或箭头来完成滚动)
我能够做到这一点,除了我无法隐藏.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 */
}
我尝试了什么:
:vertical
,但不起作用; .fixedTable-body::-webkit-scrollbar:vertical {
display: none;
}
-ms-overflow-y-style
,但我尝试过并且也无效; .fixedTable-body {
-ms-overflow-y-style: none;
}
修改
我可以隐藏.fixedTable-sidebar
和.fixedTable-body
的垂直滚动条,方法是在两个元素中创建一个外部div
并赋予它overflow: hidden
,然后创建内部元素{ {1}}和.fixedTable-sidebar
略大.fixedTable-body
- >有了这个,我能够隐藏所有浏览器的滚动条。
现在唯一的问题是滚动width > 100%
和.fixedTable-sidebar
时(通过使用鼠标滚轮或键盘箭头)右侧垂直滚动条的行为
答案 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。:我将打开关于垂直滚动条的奇怪行为的另一个问题,然后我将在这里发布链接:)