无需鼠标悬停即可滚动iframe

Question

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

我不会链接任何代码，因为我唯一相关的代码是＆lt;的iframe＆GT;＆LT; / IFRAME＆GT;标签

（身体本身不可滚动隐藏滚动条）

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正文末尾添加以下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调用它。它只是用于测试和概念验证。