在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設置爲自動 - 這隻適用於您的瀏覽器，但適用於您指定的網站。