滚动一个iframe，而不必鼠标移动它

Question

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

我不会链接任何代码，因为我唯一相关的代码是iframe> </iframe>标记<。

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

Answer 1

好的。我放在一起为这个相当快速和肮脏的解决方案，包括以下步骤：

• 添加一个“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像我这样不叫。这只是为了测试和概念验证。