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

Posted 2023-03-06

【中文标题】如何在 Google Chrome 的表格的 tbody 元素上放置左滚动条？

【英文标题】：How do I position a left scrollbar on a tbody element of a table for Google Chrome?

【发布时间】：2011-07-04 15:37:15

【问题描述】：

我已经研究过这个问题，但找不到解决方案。 该网站是一个 RTL 网站，所以我想要左侧的滚动条。 除了我真正需要的地方，我已经看到了一些可以完成此操作的 hack。

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

任何关于如何在左侧获得 TBody 滚动条的想法将不胜感激。

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

【问题讨论】：

我假设您已经尝试使用 CSS direction: rtl 在某些浏览器中移动滚动条（我认为它在 Chrome 中不会）。

@ZDYN - 是的，谢谢 - 不幸的是它不起作用。

Firefox 特有： 垂直滚动条的位置是根据客户端本地化的，不能单纯用CSS来改变。可以通过将about:config 中的layout.scrollbar.side 更改为1 来覆盖它，这将允许direction: rtl; 移动垂直滚动条。 Chrome 可能有类似的设置，但我不熟悉。

有一个 jQuery 解决方案（显然，需要链接 jQuery 库以及插件本身）：jScrollPane demo。

@David Thomas - 感谢您的链接 - 它似乎没有解决表格和 Tbody。

【参考方案1】：

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

您可以使用 javascript 来模仿您想要的东西。做一个可拖动的滚动条替换，放在左边，根据用户拖动“滚动条”的同时调整隐藏溢出。

尝试在谷歌上搜索“jquery 滚动条”或“javascript 滚动条”。

这是一个有趣的滚动替代方法...拖动（类似于您在谷歌地图中拖动地图的方式）： 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/

我会尽快更新它以使用一个表格，只是为了我自己的练习。 ;)

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

【讨论】：

@trusktr - 你能提供一个例子或一个链接来解释如何做你推荐的事情吗？

@trusktr - 我为您的努力和有用的链接投票赞成您的回答。请注意，您提出的解决方案不能解决我的问题：表格左侧的滚动条，在使用 Google Chrome 的 RTL 页面中。

朱利安，这些链接确实解决了你的问题（嗯，不是直接的）。方法如下：使用 tinyscrollbar 允许您使用 html/CSS 将滚动条放置在您想要的任何位置的左侧。

我建议你尝试在baijs.nl/tinyscrollbar 实现示例，然后尝试使用 HTML 和 CSS 来弄清楚如何将滚动条放在左侧。

事实上，如果您使用的是 Google Chrome，我将向您展示如何查看它。请参阅答案中的更新。

【参考方案2】：

如前所述。这不是 CSS 问题，但是，正如 trusktr 所说，您可以创建一个自定义 javascript 滚动条。基本上你是这样设置的。

<div id="frame">
 <div id="scrollbar">
  Actual scrollbar
 </div>
 <div id="content">
  Content here
 </div>
</div>
<style>
 #frame 
 height: 400px;
 overflow: hidden;

</style>

然后在滚动条内创建一个可拖动对象，该对象的位置会改变框架内内容的相对位置。

【讨论】：

这如何应用于 Tbody 元素（HTML 表格的一部分）？它可以在谷歌浏览器中运行吗？

@Julian 是否可以将thead 移动到单独的表格中并将其放在框架的正上方以使其看起来像是同一张表格的一部分，或者您可以使用divs 并使它看起来像一个表。如果它真的必须只在tbody上操作，我不知道。

我不希望我将不得不重写我的网站。

【参考方案3】：

对于 CSS，请使用“direction:rtl;”，但不同浏览器的结果可能会有所不同。