iframe嵌入的网页，PC端垂直/水平滚动正常，但手机端访问时无法水平滚动（左右滑动、横向滚动）

用iframe框架嵌入了一个网页，在PC上显示正常，会随着浏览器高、宽的不同而出现垂直滚动条和水平滚动条，并且均可上下滚动、水平滚动。但是通过手机访问的时候，只能上下滚动，而不能水平滚动（左右滑动、横向滚动），导致嵌入的网页也显示不完。【手机访问时，水平滚动条会显示，但无法横向滚动】


<html>
    <head>
        <title>公司核名网（重庆市企业名称库开放查询）</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    </head>
    <body>
        <div style="background:#e9f0f6;text-align:center;border:1px solid #e9f0f6;">
            <iframe src="http://ywt.scjgj.cq.gov.cn/nameSelect"  scrolling="auto"  style="width:100%;height:800px;border:1px solid #bababa;"></iframe>
        </div>
    </body>
</html>

img

img

img

在移动设备中，页面的默认行为是禁止横向滚动，因此你需要添加一些CSS样式来解决这个问题。你可以尝试使用以下CSS来强制启用横向滚动：

<style>
    body {
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
</style>

将上述CSS添加到你的页面中，这样就可以启用横向滚动。请注意，这段CSS代码只会在移动设备上生效，对于桌面设备不会产生影响。

另外，你也可以尝试修改iframe的scrolling属性的值为"yes"，以确保在移动设备上能够正确显示滚动条。修改后的代码如下：

<html>
    <head>
        <title>公司核名网（重庆市企业名称库开放查询）</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <style>
            body {
                overflow-x: scroll;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
            }
        </style>
    </head>
    <body>
        <div style="background:#e9f0f6;text-align:center;border:1px solid #e9f0f6;">
            <iframe src="http://ywt.scjgj.cq.gov.cn/nameSelect" scrolling="yes" style="width:100%;height:800px;border:1px solid #bababa;"></iframe>
        </div>
    </body>
</html>

使用以上代码，你应该能够在手机上实现横向滚动。

【以下回答由 GPT 生成】

要让手机端在嵌入的iframe网页上实现水平滚动，可以通过以下步骤解决问题：

  1. 首先，需要确保嵌入的网页内容适应手机屏幕宽度。可以在iframe标签中加入以下属性：
<iframe src="http://ywt.scjgj.cq.gov.cn/nameSelect" scrolling="auto" style="width:100%;height:800px;border:1px solid #bababa;overflow:scroll;"></iframe>
  1. 使用CSS属性overflow:scroll;或者overflow:auto;可以在iframe中显示垂直和水平滚动条。
<iframe src="http://ywt.scjgj.cq.gov.cn/nameSelect" scrolling="auto" style="width:100%;height:800px;border:1px solid #bababa;overflow:auto;"></iframe>

这样做会在手机端的iframe上显示滚动条，但要注意，此方法在一些情况下可能不起作用：

  • 如果嵌入的网页有X-Frame-Options设置为SAMEORIGIN，那么无法通过代码修改iframe的样式。
  • 如果嵌入的网页内容有JavaScript代码阻止滚动事件，那么无法通过代码修改iframe的滚动行为。

如果以上方法无效，那可能是由于嵌入的网页本身的限制导致无法在手机端实现水平滚动。在这种情况下，你可能需要联系网页的开发人员或者使用其他方法来实现你的需求。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^