Question

我正在创建类似于codepen的自己的代码游乐场。我不是想做一些特别的东西来学习如何制作。

当从左向右拖动垂直条以调整列的大小时，我遇到了一个问题。一旦我在呈现代码的iframe上放置一个高度，调整大小就会变得跳跃和缓慢。没有高度，它是光滑的。

如何为iframe添加高度并保持调整大小顺畅？

我正在使用jquery-resizable.js来调整大小。

以下是我网站的链接：Code Playground

$(document).ready(function(){
$(".left-column").resizable({
   handleSelector: ".splitter",
   resizeHeight: false
 });

 $(".code-container").resizable({
   handleSelector: ".splitter-horizontal",
   resizeWidth: false
 });

 $(".code-container-2").resizable({
   handleSelector: ".splitter-horizontal-2",
   resizeWidth: false
 });
 $(".code-container-3").resizable({
   handleSelector: ".splitter-horizontal-3",
   resizeWidth: false
 });
 
   });

@import url('https://fonts.googleapis.com/css?family=Fjalla+One');

body {
  background-color: #343436;
  margin: 0;
  padding: 0;
}
.title {
  color: #CDD3DE;
  margin-left: 20px; 
  font-family: 'Fjalla One', sans-serif;
}

#main {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  xtouch-action: none;
}

/*LEFT COLUMN*/
#left {
  flex: 0 0 auto;
  height: calc(100vh - 82.88px);

}
/*stretch makes the div containing the textarea expand the full height*/
.stretch {
  height: 33%; 
  overflow: hidden;
}

textarea {
  height: 100%;
  width: 100%;
  background: #1B2B34;
  font-family: Courier, sans-serif;
  font-size: 14px;
  color: #CDD3DE;
  overflow-y: scroll;
  overflow-x: hidden;
}

/*style the textarea scrollbars*/
textarea::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}
textarea::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}
textarea::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #555;
}

/*the dragger for the textareas in left column*/
.splitter-horizontal {
  flex: 0 0 auto;
  height: 18px;
  background: url(https://williamcunningham.me/codebox/hsizegrip.png) center center no-repeat #535353;
  cursor: row-resize;
}
.splitter-horizontal-2 {
  flex: 0 0 auto;
  height: 18px;
  background: url(https://williamcunningham.me/codebox/hsizegrip.png) center center no-repeat #535353;
  cursor: row-resize;
}
.splitter-horizontal-3 {
  flex: 0 0 auto;
  height: 18px;
  background: url(https://williamcunningham.me/codebox/hsizegrip.png) center center no-repeat #535353;
  cursor: row-resize;
}

/*RIGHT COLUMN*/
#right {
  flex: 1 1 auto;
  height: calc(100vh - 82.88px);
}

/*the dragger between left column and right column*/
.splitter {
  flex: 0 0 auto;
  width: 18px;  
  background: url(https://williamcunningham.me/codebox/vsizegrip.png) center center no-repeat #535353;
  min-height: 200px;
  cursor: col-resize;  
}

  iframe {
    width: 99%;
    /*height: 100%;*/ 
    background-color: #fff;
  }

    <h1 class="title">Code Editor</h1>
    <div id="main">
      
      <div id="left" class="left-column">
        <div class="code-container stretch">
          <textarea id="html" placeholder="HTML" class="dragger scroll emmet-syntax-html"></textarea>
        </div>
        <div class="splitter-horizontal">
            </div>
        <div class="code-container-2 stretch">
          <textarea id="css" placeholder="CSS" class="dragger scroll emmet-syntax-css"></textarea>
        </div>
        <div class="splitter-horizontal-2">
            </div>
        <div class="code-container-3 stretch">
          <textarea id="js" placeholder="JavaScript" class="scroll"></textarea>
        </div>
                <div class="splitter-horizontal-3">
            </div>
      </div><!-- end left -->
      <div class="splitter">
      </div>
      <div id="right">
        <!-- where the final code is inserted -->
        
          <iframe id="code"></iframe>
          <footer>
            <button id="save">Save</button>
            <button id="clear">Clear</button>
          </footer>
        
      </div><!-- end right -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://williamcunningham.me/codebox/jquery-resizable.js"></script>

Answer 1

我能弄清楚如何解决这个问题。调整大小时，如果鼠标移过iframe，则会停止调整大小事件。为了克服这个问题，我在调整大小时在iframe上添加了一个绝对定位的元素。

向iframe添加高度会调整大小调整

1 个答案: