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?