宽表格在移动端的水平滚动条可见吗?

When wide tables exist, in the desktop theme there is a horizontal scroll bar that hints the visitor we can scroll left and right. However in the Mobile theme there is no such scroll bar and the wide table view is really not intuitive, with visitors not being aware that the table is wider than their screen width. Could we add a scroll bar for mobile as well?

Discussion about this matter (however regarding only Desktop theme) occurred bere

3 个赞

What do you think @awesomerobot?

This is a good example of where the auto-hidden scrollbars on mobile/touch browsers aren’t great…

Discourse only officially supports Chrome & Safari on mobile, which means we can style our own scrollbar using CSS like ::-webkit-scrollbar (support). Mobile Firefox users would see no change.

I think what I would prefer to do, which would support all mobile browsers, is to add a fade to the right of the table once it gets wider than the content of the post. Then at least there’s a hint to see more even if there’s no explicit scrollbar.

The problem with that is that currently we overflow: hidden anything within .cooked as a bit of a safety so post content can’t break the page layout… so we can’t style overflowed content when there’s no visible overflow.

We might not need to overflow: hidden post content anymore? I’ll take a closer look and see if it’s sane to remove it, and if not I can add a visible scrollbar for webkit on mobile.

4 个赞

If it works but the scroll bar is hidden, that’s good enough for now – I don’t want to turn this into a ton of work. You have a solution @Mr.X_Mr.X

Yes, it’s low priority… but somewhat related to what I was already considering to fix Letters getting cut off to the leftmost in posts

3 个赞

我真的很喜欢淡入淡出的效果,无论是在桌面端还是移动端。这期间有什么变化,让实现它变得更加容易了吗?

3 个赞

这个改动容易吗 @awesomerobot?我支持。

2 个赞

再次查看后,渐变淡出效果可能不是这里的最佳方案……这将需要添加一个带有渐变背景的容器,而该效果在非纯色背景上无法良好呈现。我们在其他一些地方也使用了类似的渐变提示,但那些地方通常不太可能包含自定义背景(例如注册页面、管理导航栏)。

我认为,我们最好仅在需要时强制显示滚动条。据我所知,这样做唯一的缺点是自定义滚动条可能无法与您操作系统的原生滚动条风格相匹配。

6 个赞

这听起来比完全不提供表格可横向滚动的提示要好得多。

唉,又失败了。iOS 13 破坏了始终显示滚动条的功能……所以那个想法无法像我预期的那样适用于所有浏览器。

之前强制 iOS 滚动条显示的 CSS 覆盖方案需要使用 -webkit-overflow-scrolling: auto;,但 iOS 13 默认将所有情况下的 -webkit-overflow-scrolling 设置为 touch;,而且他们似乎已在 iOS 中完全弃用了 -webkit-overflow-scrolling

4 个赞

现在在 iOS 15(即将推出 iOS 16)上,Discourse 中的宽表格在移动设备上似乎也没有好到哪里去。

供参考,这篇关于展开表格错误的帖子中的第二个表格就是一个在移动设备(以及桌面设备)上因缺少水平滚动而失败的表格示例。

1 个赞