检测“溢出：自动”是否正常工作（移动浏览器）答案

【问题标题】：Detect whether "overflow: auto" works properly (mobile browsers)检测“溢出：自动”是否正常工作（移动浏览器）
【发布时间】：2012-02-08 17:31:45
【问题描述】：

我想以某种“不错”的方式（最有可能是 Modernizr，但无论如何）检测布局是否应该嵌入页面的可滚动区域，或者（对于某些移动使用）应该将所有内容作为一个流可滚动的质量。

具体案例是类似“EULA”的页面，其中有一个带有“我接受”按钮或其他内容的表单，然后是一大堆可怕的全大写法律内容。在大屏幕上，我希望整个表格都可见，所以我想把合法的东西放在它自己的滚动框中。然而，在一个有点丑陋的移动设备上（虽然我不是移动用户体验专家），所以我想把它全部放在一行中，这样用户就可以通过简单的滑动来阅读文本（LOL）滚动，然后在底部的按钮将滚动到视图中。

我想我可以用 Modernizr 来检查触摸，但这似乎不太正确。

edit — 虽然我很确定我所描述的内容可能是可用性方面的胜利，但问题是我发现我的 Android 设备不会关注“溢出” : auto" 在页面中间的 <div> 上。

【问题讨论】：

这个套件中不存在，但 kangax 的 cft 项目中的许多技术可能会有所帮助：kangax.github.com/cft - 甚至还有一个用于不同溢出错误的技术。
嗯，我会看看那些，但也许现在（我的直接目的几乎不需要极端严格）检查“触摸”可能是要做的事情。触摸驱动滚动是真正的问题，溢出错误与否。谢谢亚历克斯:-)

标签： javascript mobile scroll media-queries modernizr

【解决方案1】：

我采用的方法是依赖Modernizr.touch 和Modernizr.overflowscrolling 测试。如果 Modernizr 在 DOM 的 html 元素中插入 touch 和 no-overflowscrolling 类（或者直接检查 Modernizr.touch 和 Modernizr.overflowscrolling），那么我避免使用 overflow:auto。这意味着错误处理overflow:auto 的Android 设备不会得到它。

这可能是一个不完美的解决方案；在这种情况下，可能有可以处理overflow:auto 的设备无法处理。但这并不是世界末日，至少在我的情况下。它似乎适用于所有最常见的设备/浏览器。

而且它具有简单的优点。我已经为其他用途加载了 Modernizr。

【讨论】：

你如何检查 Modernizr.overflowscrolling ??
您需要使用 css-overflow-scrolling 构建 Modernizr（您可以转到 modernizr.com/download 并选中 Community Add-Ons 下的框）或使用 addTest() 如 github.com/Modernizr/Modernizr/blob/master/feature-detects/… 所示。
好的...但问题是它说该属性是受支持的，即使它不工作:(stackoverflow.com/questions/10483397/…

【解决方案2】：

正如其他人所说，Modernizr.overflowscrolling 检查overflow-scrolling css 属性，而不是检查设备是否可以使用overflow: auto 滚动div 内的内容。

事实上，在我最近的测试中，Nexus 5 实际上返回Modernizr.overflowscrolling 为false，因此不能依赖它。

这个非常小的脚本（没有依赖项）似乎可以为缺乏支持的设备（Android 2.3）启用触摸滚动... http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/

回购链接： https://github.com/chrismbarr/TouchScroll

【讨论】：

您最好在此处包含脚本，因为如果链接更改您的答案将变得无效。