javascript - 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

我试过你的object + embed方法，在滚动条上遇到了同样的问题。 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>