Mouse Scroll wheel is not worked when mouse over the iframe

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
New Member
Posts: 1
Joined: June 30th, 2016, 12:20 pm

Post Posted June 30th, 2016, 12:24 pm

Mouse Scroll wheel is not worked when mouse over the iframe of the page
In my website there is a i-frame in a area of the page. All the page the mouse scroll is working perfectly but when the mouse over the iframe the mouse scroll is not worked. This problem is shown in chrome only but the Firefox bowers is worked properly. I cannot find the solution yet. Please help me. I am feed up to find the solution. Please help.

Here is the url of the website

And the iframe code is:

<iframe src="" scrolling="yes" style="width:100%;height:1137px;"></iframe>

See The following screen sort where the mouse scroll is not worked....


User avatar
Posts: 123359
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted June 30th, 2016, 3:37 pm

Moving to Web Development.


User avatar
Posts: 2653
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Post Posted July 2nd, 2016, 7:09 am

WFM in Firefox - I can wheel-scroll from the opening menu Ombrella to the Copyright at the bottom of the page.

It does fail where your image indicates using GoogleChrome.

What I suspect - the wheel-scroll is being captured and applied to the iframe once the pointer is in the iframe container rather than the main page. The iframe scrolls fine by itself (you can open just that frame in Fx). I do not know a solution to that problem (if that i it).

See this: ... t-document

In the bootstrap.css file I changed the border from 0 to 2. This will display a border for better visibility of when the scrolling stops.

Code snip from your bootstrap.css:
Code: Select all
 iframe,.embed-responsive embed,.embed-responsive object{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:2}.embed-responsive

There is something unusual about the src in your iframe. The two snips below can be substituted; the first fails but the 2nd one will work correctly. Even just exchanging the src location gives the same results.

Another edit:
Code: Select all
<iframe src="Ombrella%20Dates%20%E2%80%93%20Has%20You%20Covered.%20Protecting%20You%20From%20Date%20Disasters_files/exo_puzzle_section.htm" scrolling="auto" style="width:100%;height:1137px;"><br></iframe>

<iframe style="border-width: 3pt;" src="$home" marginwidth="1" frameborder="1" height="972" scrolling="auto" width="980"><br></iframe>
~ I'm only here to Pay it Forward. ~

"I often take a very long windy road to my destination. When I arrive I often wonder how I missed the shortcut".

Return to Web Development / Standards Evangelism

Who is online

Users browsing this forum: No registered users and 2 guests