在 IE 8-11 中使用鼠标滚轮在 iframe 上滚动失败答案

【问题标题】：Scrolling with mousewheel over an iframe fails in IE 8-11在 IE 8-11 中使用鼠标滚轮在 iframe 上滚动失败
【发布时间】：2014-03-13 18:45:27
【问题描述】：

我正在使用一个叫做 Perfect-Scrollbar 的小 jquery 脚本。到目前为止一切顺利，但是当我将它与 iframe 结合使用时，在 IE 8 - 11 中使用鼠标滚轮滚动失败？

Firefox、Safari、Chrome 或 Opera 运行良好。

在我正在使用这个：

<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 in 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>

我怎样才能让它在 IE 中工作？

【问题讨论】：

标签： jquery html css iframe

【解决方案1】：

我认为 iFrame 是你的 bug 的原因，当然还有 IE :)

当鼠标悬停时出现滚动条，但 iFrame 会阻止父内容的悬停效果，滚动事件也是如此（由自定义滚动条处理）。

如果使用本机浏览器滚动，一切正常。因此，请尝试使用本机滚动条行为的 jQuery Scrollbar 或任何其他可以正常工作的 jQuery 滚动条插件。

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

工作示例在这里http://jsfiddle.net/yh47j/1/

【讨论】：