如何移除Google Sites中嵌入JuxtaposeJS的滚动条？适配移动端

第一步：修复iframe语法错误 #

你提供的代码存在标签嵌套错误，两个<iframe>叠加导致高度设置失效，这是滚动条出现的核心原因之一。修正后的正确代码为：

<iframe frameborder="0" class="juxtapose" width="100%" height="332" scrolling="no" src="https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=c9bdf8aa-b4bd-11ed-b5bd-6595d9b17862"></iframe>

第二步：彻底消除滚动条 #

• 强制添加scrolling="no"属性隐藏滚动条
• 调整高度值：如果仍有滚动条，尝试将height设为350px（Juxtapose的嵌入控件需要预留少量空间），或者用浏览器开发者工具查看内容实际高度后精确设置

第三步：优化移动端适配 #

用容器包裹iframe，通过百分比padding控制宽高比，避免移动端图片拉伸变形：

<div style="position: relative; width: 100%; height: 0; padding-bottom: 60%;">
  <iframe frameborder="0" class="juxtapose" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" scrolling="no" src="https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=c9bdf8aa-b4bd-11ed-b5bd-6595d9b17862"></iframe>
</div>

注：padding-bottom: 60%可根据你的图片比例调整（比如16:9比例设为56.25%），确保移动端显示比例正常。

额外排查 #

嵌入后若移动端仍有异常，检查Google Sites对应区块的内边距/外边距设置，必要时将其设为0，避免额外空间导致的滚动问题。

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