检测是否“overflow: auto”工作正常（移动浏览器）
我想以某种“好”的方式（最有可能的是 Modernizr，但无论如何）检测布局是否应该嵌入页面的可滚动区域，或者（对于某些移动用途）应该将所有内容作为一个可滚动块流动。
具体情况是一个类似“EULA”的页面，其中有一个带有“我接受”按钮或其他内容的表单，然后是大量可怕的全大写法律内容。在大屏幕上，我希望整个表单可见，因此我想将合法的内容放在自己的滚动框中。然而，在移动设备上，这会有点难看（尽管我不是移动用户体验专家），所以我想将其全部放在内联中，以便用户可以通过简单的滑动来阅读文本（哈哈）滚动，然后底部的按钮将滚动到视图中。
我想我可以检查与 Modernizr 的联系，但这似乎不太正确。
编辑 - 虽然我很确定我所描述的可能会是可用性的胜利，但问题是我发现我的 Android 设备不会关注“overflow: auto”在页面中间的
I'd like to detect in some "nice" way (Modernizr most likely, but whatever) whether a layout should have embedded scrollable regions of the page, or else (for some mobile use) should just flow all content as one scrollable mass.
The specific case is a "EULA"-like page, where there's a form with an "I ACCEPT" button or whatever, and then a mass of hideous all-caps legal stuff. On a big screen I'd like the whole form visible, so I'd like to put the legal stuff in its own scrolling box. However, on a mobile device that would be kind-of ugly (though I'm no mobile ux expert), so I was thinking of just dropping it all in-line so that the user could read the text (LOL) with simple swipes to scroll, and then at the bottom the buttons would scroll into view.
I suppose I could just check for touch with Modernizr, but that doesn't seem quite right.
edit — though I'm pretty sure that what I described would probably be a usability win anyway, the thing is I'm finding that my Android devices won't pay any attention to "overflow: auto" on a <div> in the middle of a page.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我采取的方法是依赖
Modernizr.touch和Modernizr.overflowscrolling测试。如果 Modernizr 在 DOM 中的html元素中插入touch和no-overflowscrolling类（或者仅检查Modernizr.touchcode> 和Modernizr.overflowscrolling直接），然后我避免overflow:auto。这意味着错误处理overflow:auto的 Android 设备无法获取它。这可能是一个不完美的解决方案；可能有些设备可以处理
overflow:auto但在这种情况下无法处理。但这并不完全是世界末日，至少对我来说是这样。它似乎适用于所有最常见的设备/浏览器。它的优点是简单。我已经加载了 Modernizr 以用于其他用途。
The approach I've taken is to rely on
Modernizr.touchandModernizr.overflowscrollingtests. If Modernizr inserts thetouchandno-overflowscrollingclasses in thehtmlelement in the DOM (or just checkModernizr.touchandModernizr.overflowscrollingdirectly), then I avoidoverflow:auto. This means that Android devices that mishandleoverflow:autodo not get it.This might be an imperfect solution; there might be devices that can handle
overflow:autothat don't get it in this case. But that's not exactly the end of the world, at least in my case. And it seems to work correctly for all the most common devices/browsers.And it has the virtue of being simple. I already had Modernizr loaded for other uses.
正如其他人所说，
Modernizr.overflowscrolling检查overflow-scrollingcss 属性，而不是检查设备是否可以滚动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
As others have said, the
Modernizr.overflowscrollingchecks for theoverflow-scrollingcss property, not for whether the device can scroll content within adivusingoverflow: auto.In fact, in my recent testing, the Nexus 5 actually returns
Modernizr.overflowscrollingasfalse, so it cannot be relied on.This very small script (with no dependencies) seems to enable touch scrolling for devices (Android 2.3) lacking support...
http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/
Link to repo:
https://github.com/chrismbarr/TouchScroll