2011年,苹果发布了Mac OS X Lion,它引入了增强的滚动条行为,默认情况下会隐藏滚动条。滚动条在用户开始滚动文档时出现,并在滚动停止后消失。
然而,这一增强似乎不仅改变了用户界面,还改变了开发人员在创建跨平台解决方案时对特定UI元素的看法。我称之为滚动条失明。
最近,出于某种原因,我开始注意到这一点。我访问过很多网站,它们的元素设置为overflow-y或overflow-x可滚动,而该元素并不是可滚动的。一些人甚至无缘无故地将x轴和y轴都设置为可滚动,或者创建多级堆叠滚动条。
下面是Firefox在Linux(带滚动条)和MacOS(不带滚动条)上呈现的相同的重滚动条容器的并排比较。
Spectrum.chat:用于较小屏幕的菜单位于主内容列的顶部,其中overflow-x:scroll应该是自动的。
Co:Creator Details模式的宽度为100vw,这使得它的滚动条位于文档滚动条的下方。这会产生非常混乱的用户体验,因为视图是可滚动的,但(文档)滚动条不会移动。滚动到模式底部后,文档的滚动条取代并滚动主视图。
Recursive.design:页面和所有文本编辑区都有不必要的水平滚动条。在移动视图中,一些容器会被赋予额外的滚动条。
从示例中可以看出,即使像Github和Snapchat这样的大型组织拥有数十(如果不是100)个前端开发人员,并且可能有适当的代码审查流程,也会让问题溜之大吉。我几个月前收集了这些示例,滚动条仍然和我找到的一样。
如果您是使用MacOS的前端开发人员,我恳请您多关注一下您创建的网站在您自己的平台之外的其他平台上的行为。或者,您可以通过将系统首选项->;常规->;显示滚动条设置为始终显示滚动条,将滚动条设置为始终可见。