谷歌站点嵌入代码隐藏垂直滚动条在Android端失效求助

问题根源 #

你当前的代码通过直接修改父页面iframe的scrolling属性实现无滚动效果，但在移动端失效主要有几个原因：

• 脚本执行时机过早，父页面的iframe还未完全渲染，导致无法定位到目标元素
• scrolling="no"属性在部分移动端浏览器兼容性不佳
• Google Sites移动端的iframe容器自带默认样式，可能强制显示滚动条

解决方案 #

1. 延迟脚本执行，确保父DOM加载完成 #

将修改iframe的逻辑放在页面完全加载后执行，同时更精准定位目标iframe，避免误操作其他元素：

<script>
$(window).on('load', function() {
  // 用页面URL片段精准定位嵌入的iframe
  const targetIframe = parent.document.querySelector('iframe[src*="你的嵌入页面URL标识"]');
  if (targetIframe) {
    // 同时设置属性和CSS样式，兼容多端
    targetIframe.scrolling = "no";
    targetIframe.style.overflow = "hidden";
    // 强制让iframe高度匹配内容高度，从根源消除滚动需求
    targetIframe.style.height = document.body.scrollHeight + "px";
  }
});
</script>

2. 给嵌入页面添加全局样式，消除内部滚动 #

在嵌入页面的样式表中添加全局规则，即使iframe未被正确修改，页面自身也不会出现滚动条：

html, body {
  overflow: hidden !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

3. 优化移动端视口配置 #

调整视口meta标签，避免移动端页面缩放导致内容溢出：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

4. 官方方案：直接使用Google Sites嵌入设置 #

优先推荐使用Google Sites自带的嵌入组件设置：找到嵌入组件的调整大小选项，选择自适应高度，无需额外脚本即可自动匹配内容高度，彻底消除滚动条，这是最稳定的解决方式。

完整修改后的代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Trial</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    ul#menu li {display:inline;}
    img {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    /* 新增全局样式消除内部滚动 */
    html, body {
      overflow: hidden !important;
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  </style>
  <script>
    $(window).on('load', function() {
      // 替换为你嵌入页面的URL片段，确保精准定位
      const targetIframe = parent.document.querySelector('iframe[src*="你的嵌入页面URL标识"]');
      if (targetIframe) {
        targetIframe.scrolling = "no";
        targetIframe.style.overflow = "hidden";
        targetIframe.style.height = document.body.scrollHeight + "px";
      }
    });
  </script>
</head>
<body style="font-family:Roboto Light;font-size: 16px">
  <p style="font-family:Roboto Light;font-size: 16px">Our group has two broad research area with a single goal</p>
  <h1 style="font-family:Roboto Light; color:#990000">Embeded Design</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo vel orci porta non pulvinar neque. Rhoncus urna neque viverra justo nec. Tempor id eu nisl nunc mi ipsum faucibus vitae aliquet. Dui faucibus in ornare quam viverra. Ac orci phasellus egestas tellus rutrum tellus pellentesque. Vulputate odio ut enim blandit volutpat maecenas volutpat. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Nunc sed velit dignissim sodales ut eu sem. Adipiscing elit duis tristique sollicitudin nibh sit. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Faucibus interdum posuere lorem ipsum.

    Velit dignissim sodales ut eu sem integer vitae justo eget. Mi in nulla posuere sollicitudin aliquam. Dictumst quisque sagittis purus sit amet volutpat. Pellentesque diam volutpat commodo sed egestas egestas fringilla. Adipiscing elit duis tristique sollicitudin nibh sit. Vel elit scelerisque mauris pellentesque pulvinar. Semper auctor neque vitae tempus quam pellentesque nec. Amet facilisis magna etiam tempor orci eu lobortis elementum nibh. Elementum nisi quis eleifend quam adipiscing vitae. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Vel fringilla est ullamcorper eget. Lobortis scelerisque fermentum dui faucibus in. Nunc sed blandit libero volutpat sed.
  </p>
</body>
</html>

注意：需要将代码中的你的嵌入页面URL标识替换为你实际嵌入页面的URL片段，确保能精准定位到目标iframe。

内容的提问来源于stack exchange，提问作者BaRud