javascript - 禁用 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>

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

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

如果你不喜欢卷轴:

• 向 jsfiddle 提交问题:https://github.com/jsfiddle/jsfiddle-issues
• 不要在您的网站上使用嵌入式 jsFiddle。
• 做一个Stylish将嵌入在 iframe 高度内的 iframe 设置为自动的样式 - 这仅适用于您的浏览器，但会应用于您指定的网站。