滚动 iframe 而无需将鼠标悬停在它上面

Question

我有一个 iframe，用于显示网页的主要内容；但是，无论鼠标指向何处，我都想让 IFRAME 滚动。我不希望我的访问者因为无法滚动而感到困惑，除非他们的鼠标位于 iframe 上。这可能吗？要在鼠标悬停在正文上的任意位置滚动 iframe？

我不会链接任何代码，因为我拥有的唯一相关代码是 标记。

（正文本身不能滚动，隐藏滚动条）

Answer 1

好的。我为此制定了一个相当快速而肮脏的解决方案，其中包括以下步骤：

• 为您的<iframe> 元素添加一个“id”。 （在我的示例中，我使用了id="myFrame"）
• 将 jQuery Mousewheel 插件与最新的 jQuery 一起附加到 html 页面的页眉。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>

• 最后在 html 正文的末尾或 iframe 本身之后添加以下 javascript 代码。

<script type="text/javascript">
    var scrolloffset = 30;  // amount of scrolling per mousewheel step

    var myFrame = $('#myFrame');  // the iframe ID
    var frameScrollPosition = 0;

    $(window).mousewheel(function(event,delta){

        // reset stored offset so that it matches with iframe's
        frameScrollPosition = myFrame.contents().scrollTop();

        var frameHeight = myFrame.contents().height() - myFrame.height();

        if(delta > 0){
            var newPosition = frameScrollPosition - scrolloffset;
        } else {
            var newPosition = frameScrollPosition + scrolloffset;
        }

        if(newPosition < 0){
            newPosition = 0;
        }

        if(newPosition >= frameHeight){
            newPosition = frameHeight;
        }

        frameScrollPosition = newPosition;
        myFrame.contents().scrollTop(frameScrollPosition);

    });
</script>

确保你 download 插件而不是像我一样从 github 调用它。这只是为了测试和概念验证。