Using the mousewheel to scroll over an iframe is not functioning properly in Internet Explorer versions 8 through 11

I have implemented Perfect-Scrollbar, a jQuery script, which works well in Firefox, Safari, Chrome, and Opera. However, I am facing an issue with scrolling using the mouse wheel when it is used in combination with an iframe in Internet Explorer versions 8 to 11.

In my implementation, I have included the following:

<link href="src/perfect-scrollbar.css" rel="stylesheet">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script src="src/jquery.mousewheel.js"></script>
      <script src="src/perfect-scrollbar.js"></script>
      <style>
        .contentHolder {
              position: relative;
              margin: 0px auto;
              padding: 0px;
              width: 300px;
              height: 480px;
              overflow: hidden;
        }
        .contentHolder .content { 
              background:;); 
              width: 300px; 
              height: 500px; 
        }
        .spacer { 
              text-align:center 
        }
      </style>
    <script>
      jQuery(document).ready(function ($) {
        "use strict";
        $('#Default').perfectScrollbar();
      });
    </script>

And within the body: 

<div id="Default" class="contentHolder"><iframe src="test.php" scrolling="no" width="100%" height="1550px" frameborder="0">
    <p>Your browser does not support iframes.</p>
    </iframe>
    <div class="content">
    </div>
</div>

What steps can I take to resolve this issue and make it work smoothly in Internet Explorer as well?

Answer №1

It seems that the bug is caused by the presence of an iFrame, and possibly also by IE :)

The scrollbar appears only when the mouse is over it, but the iFrame blocks the hover effect for the parent content, as well as the scroll event (which is managed by a custom scrollbar).

Everything functions correctly when using the native browser scrolling. I recommend trying out jQuery Scrollbar, which mimics the behavior of native scrollbars, or any other jQuery scrollbar plugin that does the same.

jQuery(document).ready(function ($) {
    "use strict";
    $('#default').scrollbar();
});

You can view a working example here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to emphasize a clicked hyperlink in AngularJS

Here's the HTML code I've been working on: <div id="Navigation" class="md-dialog-full"> <div class="products-options"> <a ng-click='addType("Physical")' href="javascript:void(0);"> < ...

Designing php/mysql data in a container

After successfully converting an ordered list output into a div output, I now face the challenge of stacking arrays on top of each other (and side by side with the two divs) like they would in an ordered list. Here is the original code snippet: <?php ...

Different ways to eliminate unnecessary items in an array

One task I have is to eliminate all duplicate elements within an array, as shown in the example below: var arr = [ {'seriesIndex':1,pointIndex:0}, {'seriesIndex':1,pointIndex:1}, {'seriesIndex':0,pointIndex:0}, ...

Is there a way to alter the color of radio buttons?

Is there a way to use CSS to change the background color of a radio button? I've searched online, but all the solutions I found involve JavaScript, which I don't fully understand. I attempted this CSS code, but it didn't have the desired eff ...

In what way can a programmer create HTML tailored to a designer's needs, even without a comprehensive grasp of

Currently, I am diving into my most ambitious website project yet. It's worth mentioning that I'm utilizing ASP.NET MVC 2 and the Microsoft stack. I value design and aesthetics greatly, knowing they can make or break the success of this endeavor ...

Adjust the height seamlessly on the homepage without the need for scrolling, while maintaining a stationary navigation bar and footer

Our latest project is designed specifically for mobile use. The fixed navigation bar is functioning perfectly. We also have a fixed footer with icons at the bottom. (All working well) The challenge we are facing is to make the content between the naviga ...

Ways to invoke a function in HTML aside from using the (click)="function()" syntax

How can I display data from a GET request to the WordPress API as the page loads in an Ionic app using Angular? I am able to retrieve my desired post list, but only when I use a button click event to call the method in the HTML. Since this is my first att ...

Conceal the Standard Select Dropdown Arrow in Internet Explorer 9

VIEW DEMO I attempted to use the CSS property appearance: none; to hide the select dropdown arrow, but it still shows in IE9. Refer to the image for clarification. Does anyone have a solution to hide the arrow using either CSS or jQuery? Below is my cod ...

Tips for using a unique format for a single field in jqGrid

My JQGRID site has table configuration set up like this: configid config rule 1. Application_name 'MyApps' 2. Max number 1,000,00 3. Application End 12/31/2012 Some cells are for numbers and others for dates. If a user wants to edit a date ce ...

Determine if an element is being hovered over using jQuery

How do I determine if the cursor is hovering over an element using jQuery or JS? I attempted to use $('#id').is(':hover'), but it doesn't seem to be functioning as expected. It's worth mentioning that I am calling this line ...

Displaying fresh data from a JSON URL by clicking on a button and dynamically refreshing the view in

Apologies if this question has been asked before, but I couldn't locate it. I’m currently engaged in an Angular project where I’ve loaded an external JSON file using http. The data is presented through ngRepeat. When a button is clicked, I aim t ...

Understanding AngularJS and how to effectively pass parameters is essential for developers looking

Can anyone help me figure out how to properly pass the html element through my function while using AngularJS? It seems like this method works without AngularJS, but I'm having trouble with the "this" keyword getting confused. Does anyone know how I c ...

Select option at the top of the Bootstrap dropdown

I recently implemented Bootstrap on my website. I encountered an issue with a form in the footer section where the select options are extending out of the page boundaries. <footer> <form role="form" method="GET"> <div s ...

Do you know of any lightweight and user-friendly date/time picker options available for web applications?

Here are a few things I'm looking for: I prefer jQuery based solutions. I value easy user interface over flashy design. A combined date and time picker would be ideal. I want to note that I've already explored numerous options through Google s ...

Choosing and aiming with jQuery on dynamically created Ajax pages

I am facing an issue with a Select box on a page that is generated through AJAX. Here is the code snippet: <select onchange="setLocation(this.value)"> <option value="https://xy.com/accessories.html?dir=asc&amp;limit=15&amp;order=name"& ...

Creating a progress bar with a circular indicator at the completion point

Looking to create a unique horizontal progress bar with a circle at the end using react js, similar to the image provided. Successfully implemented a custom "%" progress bar and now aiming to incorporate a circle with text inside at the end. To view the c ...

Change the color of the text to be the opposite of the background

I'm facing a challenge while creating a website for my friend. The background of the site is a moving image, and I want the font color of the main title to be the opposite of it on each frame. While I know this may require CSS, I am unsure of how to ...

What steps are involved in generating a scene dynamically with A-Frame?

Looking to transition from declarative coding in js and html to a programmatic approach with Aframe? You might be wondering if it's possible to modify your scene dynamically, here is an example of what you're trying to achieve: <!DOCTYPE html ...

Transferring data from ng-init to <script> in AngularJS

Take a look at this code snippet: <div ng-init="companyData"> <script type="text/javascript"> window.timeline = new TL.Timeline('timeline-embed', sampleJson); </script> </div> Is there a method to include company ...

Implement various class versions tailored specifically for mobile browsers

While editing a Wordpress theme, I decided to include a content box within Bootstrap's <div class="well">. However, I soon encountered an issue where there was excess space in the content box on desktop view. To address this, I removed the paddi ...