捕捉移动视口

发布于 2025-01-04 02:50:46 字数 357 浏览 0 评论 0原文

我正在开发一个网站,根据页面的不同,该网站将有 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

鹿港巷口少年归 2025-01-11 02:50:46

我们最终实现了与这个问题中讨论的非常相似的东西 水平和垂直滚动除外。

We eventually implemented something very similar to that discussed in this question except with both horizontal and vertical scrolling.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文