huangyiyun 2023-09-10 21:44 采纳率: 0%
浏览 9

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

  • 写回答

2条回答 默认 最新

  • qq_47746614 2023-09-11 08:34
    关注

    在移动设备中，页面的默认行为是禁止横向滚动，因此你需要添加一些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>

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

    评论

报告相同问题？

问题事件

  • 创建了问题 9月10日

悬赏问题

  • ¥500 52810做蓝牙接受端
  • ¥15 基于PLC的三轴机械手程序
  • ¥15 多址通信方式的抗噪声性能和系统容量对比
  • ¥15 winform的chart曲线生成时有凸起
  • ¥15 msix packaging tool打包问题
  • ¥15 finalshell节点的搭建代码和那个端口代码教程
  • ¥15 Centos / PETSc / PETGEM
  • ¥15 centos7.9 IPv6端口telnet和端口监控问题
  • ¥20 完全没有学习过GAN，看了CSDN的一篇文章，里面有代码但是完全不知道如何操作
  • ¥15 使用ue5插件narrative时如何切换关卡也保存叙事任务记录