html - 如何在 Google Chrome 表格的 tbody 元素上放置左滚动条?

标签 html css google-chrome html-table scrollbar

我已经调查过这个问题,但找不到解决方案。 该网站是一个 RTL 网站,所以我想要左侧的滚动条。 除了我真正需要的地方,我已经看到一些技巧可以完成这项工作。

表格的 Tbody 元素需要在标题行不消失的情况下向下滚动。 我可以在 tbody 的右侧获得滚动条,但不知道如何将其移动到左侧。

如果有任何关于如何让 TBody 的滚动条位于左侧的想法,我们将不胜感激。

我很幸运,它只需要在 Google Chrome 上运行。

最佳答案

它不能用 CSS 改变。例如,有些浏览器(iPhone、ANdroid)没有滚动条。滚动条的位置完全取决于用户的系统,而不是网页。

你可以用Javascript模仿你想要的东西。做一个可拖动的滚动条替换,放在左边,根据用户拖动“滚动条”调整隐藏的溢出。

尝试使用谷歌搜索“jquery scrollbar”或“javascript scrollbar”。

这里有一个有趣的滚动替代方法...拖动(类似于您在谷歌地图中拖动 map 的方式): http://plugins.jquery.com/project/MapScroller

还有另一种选择,这是一个计算用户滚动条宽度的脚本: http://plugins.jquery.com/project/ba-jquery-scrollbarwidth-plugin 您可以计算宽度,然后使用 overflow:hidden 隐藏滚动条,然后在左侧添加一个与您要滚动的框相同高度和与用户滚动条相同宽度的 div,然后编写一个脚本将右侧框滚动到与左侧相同的位置,从而模仿内置的系统滚动条。

有无限可能,只需使用 google 即可找到您需要的内容并发挥创意。 ;)

但是,我认为这正是您要找的: http://baijs.nl/tinyscrollbar/ 正如您在示例中所见,滚动条由元素组成。如果您愿意,可以将它们放在左侧。

也许,连同这个: http://plugins.jquery.com/project/tbodyscroll 正是您所需要的。 ;)

检查一下,这是一个工作示例: http://jsfiddle.net/trusktr/xQSxJ/

我会尽快对其进行更新,以便使用仅供我自己练习的表格。 ;)

通常,您只能找到部分解决方案,需要即兴发挥才能得出完整且独特的解决方案。 :) 祝你好运。

关于html - 如何在 Google Chrome 表格的 tbody 元素上放置左滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5123417/

相关文章:

javascript - 如何使用inspect元素找到此测验的答案?

javascript - 保持 HTML 表格行在屏幕上永久可见

javascript - 底部 60 左右像素被 chop ,css 不正确?

jquery - Chrome 事件触发在大型 DOM 中需要很长时间

php - 为 HTML 编码 mySQL 文本?

html - Bootstrap 4 Order div列

javascript - 当在同一个 div 上触发偶数 "mouseover "时如何更改 div 颜色?纯JS

html - 如何修复 'two' 类行右侧的边距?

javascript - 在javascript中覆盖对象的toString

html - 有没有办法从 Chrome 获取明确的警告消息,而不仅仅是黄色三 Angular 形?