javascript - 检测 "overflow: auto"是否正常(手机浏览器)

标签 javascript mobile scroll media-queries modernizr

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

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

我想我可以检查与 Modernizr 的联系,但这似乎不太正确。

编辑 — 尽管我很确定我所描述的内容可能无论如何都会在可用性方面取得成功,但问题是我发现我的 Android 设备不会关注“溢出” : auto"在 <div> 上在页面中间。

最佳答案

我采用的方法是依赖于 Modernizr.touchModernizr.overflowscrolling 测试。如果 Modernizr 在 DOM 的 html 元素中插入 touchno-overflowscrolling 类(或者只检查 Modernizr.touchModernizr.overflowscrolling 直接),然后我避免 overflow:auto。这意味着错误处理 overflow:auto 的 Android 设备不会得到它。

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

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

关于javascript - 检测 "overflow: auto"是否正常(手机浏览器),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9198445/

相关文章:

javascript - Electron NativeTheme : Cannot set property 'themeSource' of undefined

javascript - Jquery,停止排队函数并重置为原始函数

javascript - 在javascript中获取插入符号位置之前的最后一个字符

css - Android浏览器相对高度不准确

ios - 自定义 didSelectAnnotationView 不在 map 中滚动

javascript - 如何从 iframe 刷新父窗口?

c# - 在 asp.net webform 中检测移动版本 - c#

javascript - 移动设备中禁用的子菜单 "mouseover"

java - Eclipse SWT : How to scroll Text programmatically

php - 航点无限滚动仅添加更多数据一次