Question

我正在尝试缩小iframe元素（使用css媒体查询）以更好地适应我的页面。但是，当它缩小并开始与iframe交互时，我的网页会水平滚动。下面的小提示演示了当我使用Chrome时的这个问题。

这是html：

<p>Before Iframe</p>

<iframe class="studyStackIframe" src="https://www.studystack.com/inewflashcard-1"
    width="850" height="440" frameborder="0" scrolling="no"
    style="background-color:pink;overflow:hidden"></iframe>

<p>After Iframe</p>

这里是css（减去供应商前缀属性）：

@media all  and   (max-width: 875px){

  * {
      background-color: pink;
  }    


  .studyStackIframe {
      transform: scale(0.8, 0.8);
      transform-origin: top left;
  }
}

要查看问题，请调整Chrome大小以缩小页面大小。显示粉红色背景后，继续使窗口变小，以使iframe元素适合该区域。现在点击红色和绿色框几次。您会注意到页面水平滚动，因此iframe元素未完全显示。

（jquery动画也存在一些问题，但我现在专注于滚动问题。）

Answer 1

.studyStackIframe {    
margin: 0 auto;
display: block;
}

启用iframe修复问题

为什么缩放iframe水平滚动

1 个答案: