Add JavaScript to dynamically control overflow wrappers like that in Timeless

[Zes-MinKey-Young]

Timeless 皮肤是个成熟的官方皮肤不过太牢了，我一直很想 Citizen 这么一个美观、现代的皮肤吸收 Timeless 的那些成熟的经得起时间考验（恰巧 Timeless 这个名字也正是这个意思）的优秀特性。没有踩一捧一的意思，就是想要这么一个 feature，求求了

问题

在当前的 Citizen 皮肤中，wikitable 被包裹在 div.citizen-overflow-wrapper 内，其内部还有一个 div.citizen-overflow-content，并设置了 overflow: auto hidden。这对于处理溢出内容（特别是移动设备）效果很好。但overflow: auto hidden 会创建一个块级格式化上下文（BFC）。如果本地界面管理员想要为 <th> 添加 position: sticky 属性，由于表头处于 BFC 中，该属性不会吸在顶栏下面，而是吸在 BFC 顶部。

解决方案

在 Timeless 皮肤中，会监听内容溢出情况。如果视口宽度不足，则会向表格的内部包装器添加 CSS 类，使其 overflow-x: auto。当视口足够宽时，则不添加 overflow 属性，因此不会创建 BFC，position: sticky 也就能正常工作。

当出现滚动条以适应窄视口时，即使创建了 BFC 也无妨，因为在内容水平可滚动的情况下使用吸顶表头本来就不合适。

您可以查看 滚动的天空 Wiki (Miraheze) 上的一个文件页面来观察差异。尝试调整窗口大小以触发 Timeless 的溢出包装策略：

File:RSWiki Logo (Timeless) https://rs.miraheze.org/wiki/File:RSWiki_Logo.svg?useskin=timeless

File:RSWiki Logo (Citizen) https://rs.miraheze.org/wiki/File:RSWiki_Logo.svg?useskin=citizen（Miraheze 农场在最初提交此问题时提供的 Citizen 是 3.9 版本。）

您可以看到 wikitable 标题往下偏了一点。这个偏移量当然等于标题栏的高度。（如果我们的建议不被采纳，我们就只能取消 Citizen 的 Stikitable 功能了 :( 求求了我什么都会做的欧内盖 ）

对于没有被包裹在 BFC 里的元素，例如 Navbox，position:sticky属性工作正常。请查看 Rolling Sky Wiki 上的"山丘"页面（滚动到页面底部）：

山丘 (Timeless) https://rs.miraheze.org/wiki/%E5%B1%B1%E4%B8%98?useskin=timeless

山丘 (Citizen) https://rs.miraheze.org/wiki/%E5%B1%B1%E4%B8%98?useskin=citizen

替代

全站脚本可以本地解决这个问题，但我没写过。彻底改变表格的 DOM 结构，使表格标题脱离 BFC 可能也有用。但这些解决方案都太麻烦且不够优雅。

另外，我想再补充一个建议：目前 Citizen 仅为 MediaWiki 原生元素添加 wrapper，但在 Timeless 中，模板模块生成的表格也会被包装。Citizen 能否也为模板模块生成的元素添加 wrapper？或者如果有兼容性方面的顾虑，能否至少在 ResourceLoader 里面暴露一个能够像包装 <syntaxhighlight> 和 .wikitable 那样，用来包装嵌入自模板模块的元素的方法？

以上内容可能读起来有点怪，因为是后来翻译回中文的，并且有 AI 翻译成分，中文的个别词句要比下面英文多一点内容。为什么我要翻译回中文？因为我突然发现原来 Alistair 老师是中文母语者，那我怎么还要冒着不能准确传递意思的风险说英语，想想就觉得奇怪。

Citizen is really a nice and modern skin, with native dark mode and beautiful user interface, while Timeless is an official, mature and stable one. I've always hoped that Citizen could absorb those good features from Timeless, which, just as the 'Timeless' name itself goes, stand the test of time.

The Problem

In the current Citizen, wikitables are wrapped with div.citizen-overflow-wrapper, and inside it there is div.citizen-overflow-content, with a overflow: auto hidden. This works well for overflow content, especially on mobile devices. But setting overflow: auto hidden results in a Block Formatting Context (BFC). If the local interface administrator want to add a position: sticky property, it would not work for the <th> is in the BFC.

The Solution

In Timeless, overflowing is listened, and if the viewport is not wide enough, CSS classes would be added to the tables' inner wrappers to make them overflow-x: auto. When the viewport is wide enough, no overflow property is added, and there is no BFC, so position: sticky works.

It does not matter though the BFC is still created when the scrollbar appears to adapt to the narrow viewport, since it is not reasonable to use sticky table headings when the content is horizontally scrollable.

You can view a File: page on Rolling Sky Wiki (Miraheze) to see the difference. Try resizing the window to trigger Timeless's wrapper overflow strategy:
File:RSWiki Logo (Timeless)
File:RSWiki Logo (Citizen) (The farm, Miraheze, was providing Citizen 3.9 when this issue was initially posted.)
You can see that the wikitable headings have an exceptional offset. The offset is equivalent to the height of the title bar, of course. (If our suggestion were not taken, sadly we could only disable the Stikitable feature for Citizen :( )

In elements not included in a BFC, such as Navbox, the position:sticky property works well. See a page "Massif" on Rolling Sky Wiki (please scroll to the bottom of the page):
Massif (Timeless)
Massif (Citizen)

The Alternatives

Sitewide scripts could solve the problem locally, but I have never written one. Thoroughly changing the DOM structure of the table to make the table headings out of the BFC may help. But these solutions are all too troublesome and not elegant.

By the way, I would like to add another related point: the wrappers are only added for MediaWiki native elements, but in Timeless module-generated table are also wrapped.