Отключение возможности прокрутки в JSFiddle

Есть ли способ полностью отключить прокрутку в 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>


javascript css jsfiddle tablesorter
person tom    schedule 11.07.2015    source источник
comment
Почему вы внедряете jsfiddle на свой сайт?   -  person Barmar    schedule 11.07.2015
comment
Так как я создал там сортировщики таблиц для своего веб-сайта   -  person tom    schedule 11.07.2015
comment
Я не совсем понимаю ваш вопрос (часть внедрения), но если вы хотите удалить прокрутку из result frame из fiddlejs, вам нужно будет получить ссылку на этот iframe и добавить атрибут scrolling='no'   -  person leo.fcx    schedule 11.07.2015
comment
Я добавляю результаты на свою страницу через html и вставляю URL-адрес /show. Есть ли более простой способ получить скрипку, которую вы создали, на свой сайт?   -  person tom    schedule 11.07.2015

Ответы (1)


arrow_upward
0
arrow_downward

Когда вы встраиваете демонстрацию JSFiddle на свой сайт, JSFiddle добавляет панель «Результат» вверху, чтобы добавить ссылку, позволяющую редактировать демонстрацию в JSFiddle. Из-за этой панели и вложенного iframe, установленного на ту же высоту, что и внешний фрейм, появляется полоса прокрутки (демо).

<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.

Таким образом, вы не можете предотвратить прокрутку встроенного iframe JSFiddle, поскольку iframe внутри встроенного iframe имеет заданную высоту.

Если вам не нравится прокрутка:

  • Отправить вопрос в jsfiddle: https://github.com/jsfiddle/jsfiddle-issues
  • Не используйте встроенный jsFiddle на своем сайте.
  • Создайте стиль Stylish, который автоматически устанавливает iframe, встроенный в высоту iframe. Это будет работать только в вашем браузере. , но будет применяться к указанным вами сайтам.
person Mottie    schedule 11.07.2015
comment
Извините за задержку. Спасибо Мотти. Кажется, в данный момент я рву на себе волосы из-за этого и JSFiddle, поскольку я новичок в этом. Каков наилучший способ получить скрипку, которую вы создаете на jsfiddle, на сайт? - person tom; 13.07.2015
comment
Почему ты используешь скрипку? Вы хотите, чтобы ваши пользователи могли редактировать его? Или вы просто демонстрацию показываете? В любом случае, поделитесь ссылкой на демонстрацию jsFiddle и создайте iframe, указывающий на страницу, которую вы размещаете с демонстрацией, — тогда у вас будет полный контроль над демонстрацией. - person Mottie; 13.07.2015
comment
Я создал таблицу на JSFiddle и теперь не знаю, как удалить код HTML, JS и CSS оттуда на мой созданный сайт Wix.com. Как добавить код в iFrame, не будучи демо-версией или редактируемой? - person tom; 13.07.2015
comment
Я никогда не использовал Wix.com... если они позволяют вам создать новую страницу, скопируйте HTML, CSS и javascript (убедитесь, что код заключен в функцию готовности документа) на эту новую страницу. Затем добавьте iframe, который указывает на эту новую страницу. Если вам нужна помощь, обратитесь в службу поддержки Wix.com. - person Mottie; 13.07.2015