捕捉移动视口
我正在开发一个网站,根据页面的不同,该网站将有 2-3 列。
移动支持很重要,我们已经在处理 iOS/Android/其他设备上的方向更改。
视口的初始大小适合一列的宽度。大多数移动浏览器都具有“粘性”水平滚动功能,以便更轻松地向上/向下滚动列(在显着向上/向下滚动后,轻微的左右拖动将被忽略)。
我想要的是,一旦用户开始向左/向右滚动,滚动将再次“粘在”下一列。
我不知道这是否可能?
另一种方法是我们使用overflow:auto; 来调整页面的大小以适合视口,并自己处理滚动。我想这会是更可靠的跨浏览器,但感觉有点老套,而且可能需要付出很多努力才能正确打磨。
有没有人见过这样的东西/有什么建议吗?
I'm developing a site which will have a 2-3 columns depending on the page.
Mobile support is important and we're already handling orientation changes on iOS/Android/others.
The viewport is initially sized to fit the width of one column. Most mobile browsers have "sticky" horizontal scrolling to make it easier to scroll up/down a column (minor left-right drags are ignored after significant up/down scrolling).
What I'd like is that once the users starts scrolling left/right that the scroll would "stick" again at the next column.
I don't know if this is even possible?
The alternative would be for us to size the page to the viewport with overflow:auto;
and handle the scrolling ourselves. I imagine this would be more reliable cross-browser but it feels a little hacky and like it might be a lot of effort to polish properly.
Has anyone seen anything like this / have any suggestions?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我们最终实现了与这个问题中讨论的非常相似的东西 水平和垂直滚动除外。
We eventually implemented something very similar to that discussed in this question except with both horizontal and vertical scrolling.