在JSFiddle中禁用滚动功能

Question

有没有办法在JSFiddle中完全停用滚动。

我已经试过：

position: fixed; 

和

overflow: hidden; 

但是当我嵌入我的网站，结果我还是能下滚。我想知道是否有人对如何完全解决某些问题有任何提示，并且没有滚动功能。

我现在的HTML和CSS：

.hidden { 
 
    visibility: collapse; 
 
} 
 
html, 
 
body { 
 
    height: fit; 
 
    background: #e2dede; 
 
    margin: 10px; 
 
} 
 
div { 
 
    width: fit; 
 
    overflow: hidden; 
 
} 
 
td + td { 
 
    border-left: 1px solid #eee; 
 
} 
 
th { 
 
    border-bottom: 1px solid #fff; 
 
    background: #333333; 
 
    color: #fff; 
 
    padding: 5px 5px; 
 
    font-family: "raleway"; 
 
    font-size: 14px; 
 
} 
 
td { 
 
    border-bottom: 1px solid #eee; 
 
    background: #e2dede; 
 
    color: #000; 
 
    padding: 5px 5px; 
 
    font-family: "raleway"; 
 
    font-size: 13px 
 
}

<table class="tablesorter"> 
 
    <table> 
 
    <thead> 
 
     <th>Name</th> 
 
     <th>Release Date</th> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>Peter Parker</td> 
 
     <td>11/07/2015</td> 
 
     </tr> 
 
     <tr> 
 
     <td>John Hood</td> 
 
     <td>11/07/2015</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Clark Kent</td> 
 
     <td>12/07/2015</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Bruce Almighty</td> 
 
     <td>13/07/2015</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Bruce Evans</td> 
 
     <td>14/07/2015</td> 
 
     </tr> 
 
    </tbody> 
 
    </table>

Answer 1

当您嵌入在您的网站的jsfiddle演示的jsfiddle增加了横跨顶部的“结果”栏添加一个链接，允许编辑JSFiddle中的演示。由于该栏和嵌套的iframe设置为与外框相同的高度，因此会出现滚动条（demo）。

<iframe height="300" width="100%" src="http://jsfiddle.net/5sadgev6/embedded/result,html,css" allowfullscreen="allowfullscreen" frameborder="0"> 

    <div id="wrapper"> 
    <div id="head"> 
     <h1><a title="Edit in JSFiddle" href="/5sadgev6/light/" target="new">Edit in JSFiddle</a></h1> 
     <div id="actions" class=""> 
     ... 
     </div> 
    </div> 

    <div id="tabs" style="height: 298px;"> 
     <div class="tCont result active" id="result"> 
     <iframe style="height: 300px;" src="//fiddle.jshell.net/5sadgev6/show/light/" sandbox="allow-forms allow-popups allow-scripts allow-same-origin"></iframe> 
     </div> 

     ... 

    </div> 
    </div> 

</iframe> 

看看JSFiddle在上面的HTML中添加的高度设置。

因此，基本上，您无法阻止嵌入式JSFiddle iframe滚动，因为它是嵌入式iframe中具有设置高度的iframe。

如果你不喜欢的滚动：

• 问题提交给的jsfiddle：https://github.com/jsfiddle/jsfiddle-issues
• 不要在网站上使用嵌入式的jsfiddle。
• 制作Stylish样式，将嵌入iframe高度的iframe设置为自动 - 这只适用于您的浏览器，但适用于您指定的网站。