I am implementing top and bottom horizontal scrollbar for an iframe .I am using an external site url to be displayed on the iframe.

I created one more div 'scrollbar' before main div containig iframe.On it's scroll event,I am changing the scroll position of iframe and vice verse.

This is my implementation.

If I give any url from the same domain ( something likelocalhost:8080/myProject/samplePage.html ), it works perfectly . But for external urls it doesn't work.

This error coming when I scroll top scrollbar.

Uncaught SecurityError: Blocked a frame with origin from accessing a frame with origin. Protocols, domains, and ports must match.