I am using the following HTML to embed HTML from an external URL into my site and it works great:

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

On the page, a vertical scroll bar is shown, which is the correct behavior I expect, as content is larger than the height of the Chrome browser window.

However, when I click the vertical scroll bar for the first time, the page scrolls... After that, without clicking, the page scrolls whenever the mouse is over the vertical scroll bar, WITHOUT me actually clicking to scroll.

Has anyone seen this, and can you suggest how to solve? It's a weird behavior I have not seen before...

I am using the following HTML to embed HTML from an external URL into my site and it works great:

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

On the page, a vertical scroll bar is shown, which is the correct behavior I expect, as content is larger than the height of the Chrome browser window.

However, when I click the vertical scroll bar for the first time, the page scrolls... After that, without clicking, the page scrolls whenever the mouse is over the vertical scroll bar, WITHOUT me actually clicking to scroll.

Has anyone seen this, and can you suggest how to solve? It's a weird behavior I have not seen before...

• javascript
• jquery
• html
• css

• to clarify, when i click on the scroll bar..it seems to never release, and remain stuck in pressed/stick mode. – mike01010 Commented Nov 6, 2016 at 9:13
• Question, do you even want a scroll feature? – A.J. Hernandez Commented Nov 9, 2016 at 6:33
• 1.that's most probably a browser bug, 2.if the browser supports object tag api, it shouldn't show scrollbars at all. 3.if it does but still shows a scroll, the scroll bar belongs to the embedded browser element whose mouse up sequence is being lost during the scroll. – Bekim Bacaj Commented Nov 9, 2016 at 7:21
• 1 The bug has been reported several times in the Chromium tracker but no solution has been proposed, apparently. See issues 305335, 406611, and 601377. – Martin Parenteau Commented Nov 13, 2016 at 4:16

4 Answers 4

I have tried your object + embed approach, and encountered the same problem with the scrollbar. The Chrome browser seems to not trigger the mousedown on the scrollbar, but does fire the mouseup, which looks like a bug. Why not try an iframe? It works as you expect, I think:

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

To make it span the entire window, set these styles:

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

It would be better to use an iframe instead of an embed.

iframe:

The iframe element represents a nested browsing context. The HTML 5 Standard describes "The element" as primarily used to include resources from other domains or subdomains, but can be used to include content from the same domain as well. The iframe's strength is that the embedded code is 'live' and can communicate with the parent document.

embed:

Standardized in HTML 5, but before that, it was a non standard tag, which admittedly, was implemented by all major browsers. Behavior prior to HTML 5 can vary...

The embed element provides an integration point for an external (typically non-HTML) application or interactive content. The HTML 5 Standard describes "The element" as used to embed content for browser plugins. Exceptions to this are SVG and HTML, which are handled differently according to the standard.

The details of what can and cannot be done with the embedded content is up to the browser plugin in question. But for SVG, you can access the embedded SVG document from the parent with something like:

svg = document.getElementById("parent_id").getSVGDocument();

From inside an embedded SVG or HTML document, you can reach the parent with:

parent = window.parent.document;

For embedded HTML, there is no way to get at the embedded document from the parent (that I have found).

Try using the max-height property in pixels, and use the overflow property to scroll...

 object_classname{
     max-height: 600px; //as you like
     overflow-y: scroll;
 }

Couldbe hardware related. If you have a button/wheel on the mouse that you are clicking when you select the scrollbar. IT sounds like a problemI experienced with amouse that had an extra button on a scroll wheel.