HTML对象元素和滚动条问题

Question

我使用以下HTML将外部URL中的HTML嵌入到我的网站中,效果很好:

<object data="https://myapp.com/explore" width="100%" height="100%" type="text/html" style="overflow: hidden;">
    <embed src="https://myapp.com/explore" width="100%" height="100%;" /> 
    Error: Embedded data could not be displayed.
</object>

在页面上,显示垂直滚动条,这是我期望的正确行为,因为内容大于Chrome浏览器窗口的高度.

但是,当我第一次单击垂直滚动条时,页面会滚动...之后,无需单击,只要鼠标位于垂直滚动条上,页面就会滚动,而实际上我没有点击滚动.

有谁看过这个,你能建议如何解决？这是我以前从未见过的奇怪行为......

Answer 1

我尝试过你的对象+嵌入方法，并遇到了与滚动条相同的问题。Chrome 浏览器似乎不会触发mousedown滚动条上的 ，但会触发mouseup，这看起来像是一个错误。为什么不尝试一下 iframe？我认为它如您所期望的那样工作：

<iframe id="exploreIFrame" src="http://myapp.com/explore"
  width="100%" height="100%" style="border: none;"
></iframe>

要使其覆盖整个窗口，请设置以下样式：

<style type="text/css">
  body { margin: 0; }
  #exploreIFrame { position: fixed; }
</style>