英文:

overflow-x Mobile remove horizontal scrolling

问题

I have a splash page that uses pictures as its background. When it's in desktop view, everything looks great. On mobile, I have it absolutely positioned, so the logo can stay in the middle.

我的启动页面使用图片作为背景。在桌面视图下一切都很好。在移动设备上，我使用绝对定位，以便徽标保持在中间。

My code looks like: https://jsfiddle.net/joshrodgers/r548b3cm/28/

我的代码如下：https://jsfiddle.net/joshrodgers/r548b3cm/28/

This works well, but when I view on mobile, I can still scroll over to the right. I know it's because my width is set to 1500px (I am putting it in the middle with my positioning), and I know that mobile browsers ignore overflow-x on the body, but is there a way to get rid of the horizontal scroll on mobile?

这个方法效果很好，但在移动设备上查看时，我仍然可以向右滚动。我知道这是因为我的宽度设置为1500像素（我是用绝对定位将其放在中间的），我也知道移动浏览器会忽略body上的overflow-x，但是否有办法在移动设备上去除水平滚动条？

I have tried to wrap test div in another div, then set that div's width to 100%, but that resizes the contents inside my test div. I'd like to just continue to use this code and prevent horizontal scrolling.

我尝试将测试div包装在另一个div中，然后将该div的宽度设置为100%，但这会改变测试div内部的内容大小。我希望继续使用这段代码并防止水平滚动。

I found some resources on how to disable horizontal and vertical scrolling by just adding overflow: hidden to the body, but my page does need to scroll vertical, so this doesn't solve the problem.

我找到了一些关于如何通过将overflow: hidden添加到body来禁用水平和垂直滚动的资源，但我的页面确实需要垂直滚动，所以这不解决问题。

I would not be opposed to using jQuery or JS to do this, just haven't discovered something that works.

我不反对使用jQuery或JS来实现这一点，只是还没有找到有效的方法。

My meta tag looks like: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/> I have read some solutions that recommended some tweaks to this, but everything I have tried seems to preserve that horizontal scrolling.

我的meta标签如下：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>我已经阅读了一些建议对此进行微调的解决方案，但似乎所有我尝试过的方法都保留了水平滚动。

Any ideas?

有什么建议吗？

Thanks, Josh

谢谢，Josh

英文:

I have a splash page that uses pictures as it's background. When it's in desktop view, everything looks great. On mobile, I have it absolutely positioned, so the logo can stay in the middle.

My code looks like: https://jsfiddle.net/joshrodgers/r548b3cm/28/

This works well, but when I view on mobile, I can still scroll over to the right. I know it's because my width is set to 1500px (I am putting it in the middle with my positioning), and I know that mobile browsers ignore overflow-x on body, but is there a way to get rid of the horizontal scroll on mobile?

I have tried to wrap test div in another div, then set that div's width to 100%, but that resizes the contents inside my test div. I'd like to just continue to use this code and prevent horizontal scrolling.

I found some resources on how to disable horizontal and vertical scrolling by just adding overflow: hidden to the body, but my page does need to scroll vertical, so this doesn't solve the problem.

I would not be opposed to use jQuery or JS to do this, just haven't discovered something that works.

My meta tag looks like: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/> I have read some solutions that recommended some tweaks to this, but everything I have tried seems to preserve that horizontal scrolling.

Any ideas?

Thanks,<br />Josh

答案1

得分: 0

我添加了：touch-action: pan-y pinch-zoom; 到我的 .test，现在它不再滚动

谢谢,
Josh

英文:

I added: touch-action: pan-y pinch-zoom; to my .test and now it doesn't scroll

Thanks,<br />
Josh