Mouse Scroll wheel is not worked when mouse over the iframe

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

Mouse Scroll wheel is not worked when mouse over the iframe

Post by webdevtanmoy »

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 http://www.ombrelladates.com/


And the iframe code is:

<iframe src="http://ombrelladates.com/exo_puzzle_section.html" scrolling="yes" style="width:100%;height:1137px;"></iframe>

See The following screen sort where the mouse scroll is not worked....
Image
User avatar
DanRaisch
Moderator
Posts: 127166
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Re: Mouse Scroll wheel is not worked when mouse over the ifr

Post by DanRaisch »

Moving to Web Development.
User avatar
BruceAWittmeier
Posts: 3076
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Re: Mouse Scroll wheel is not worked when mouse over the ifr

Post by BruceAWittmeier »

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.

Edit:
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:
http://stackoverflow.com/questions/2708 ... 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="http://www.roanokeva.gov/WebMgmt/ywbase61b.nsf/DocName/$home" marginwidth="1" frameborder="1" height="972" scrolling="auto" width="980"><br></iframe>
I often take a long windy road to my destination. Upon arrival, I wonder how I missed the shortcut.
Post Reply