Question

我创建了一个拆分视图，以将我的网页分为左右两边。当前，左侧部分包含供用户输入的文本区域，右侧部分模拟用户键入的内容。我现在面临的问题是，一旦文本区域扩展到大于用户的视图，网页的两侧就会具有独立的滚动条（如图中所示）。我想这样做，以便网页具有单个滚动条来控制两个视图，但是我不确定如何执行此操作。

scrollbars

HTML：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>sCalc</title>

  <!-- Stylesheets -->
  <link rel="stylesheet" href="scripts/bootstrap.min.css">
  <link rel="stylesheet" href="scripts/styles.css">

  <!-- Scripts -->
  <script>
    delete module.exports
  </script>
  <script src="scripts/jquery-3.2.1.js"></script>
  <script src="./window.js" charset="utf-8"></script>

</head>


<body>
  <div id="container" class="container-fluid">

    <!-- Input row -->
    <div class="split left">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
        <h3 class="hash-heading">Input</h3>
        <textarea id="text-input" class="form-control text-input" style="overflow:hidden" placeholder="Enter text and see the results..."></textarea>

        <!-- Script handling auto resize of input box -->
        <script>
          var textarea = document.getElementById("text-input");

          textarea.oninput = function() {
            textarea.style.height = "";
            textarea.style.height = Math.min(textarea.scrollHeight) + "px";
          };
        </script>
      </div>
    </div>

    <!-- Output row -->
    <div class="split right">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h3 class="hash-heading">Output</h3>
        <pre id="usrOutput" class="hash-output"> </pre>
      </div>
    </div>

  </div>
</body>

</html>

CSS：

textarea {
  resize: none;
}

.split {
    height: 100%;
    width: 50%;
    position: fixed;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
    padding-top: 20px;
}

.left {
    left: 0;
    background-color: white;
}

.right {
    right: 0;
    background-color: #E0E0E0;
}

Answer 1

使用弹性框，而不是使用position: fixed来拆分屏幕。在textarea窗格中添加行时，另一个窗格也将伸展，并且只有一个滚动条：

textarea {
  resize: none;
  overflow: hidden;
}

#container {
  display: flex;
  min-height: 100vh;
}

.split {
  width: 50%;
  padding-top: 20px;
}

.left {
  background-color: white;
}

.right {
  background-color: #E0E0E0;
}

html, body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

<link rel="stylesheet" href="scripts/bootstrap.min.css">


<div id="container" class="container-fluid">

  <!-- Input row -->
  <div class="split left">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
      <h3 class="hash-heading">Input</h3>
      <textarea id="text-input" class="form-control text-input" placeholder="Enter text and see the results..."></textarea>

      <!-- Script handling auto resize of input box -->
      <script>
        var textarea = document.getElementById("text-input");

        textarea.oninput = function() {
          textarea.style.height = "";
          textarea.style.height = Math.min(textarea.scrollHeight) + "px";
        };
      </script>
    </div>
  </div>

  <!-- Output row -->
  <div class="split right">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <h3 class="hash-heading">Output</h3>
      <pre id="usrOutput" class="hash-output"> </pre>
    </div>
  </div>

</div>

单个滚动条用于拆分视图HTML

1 个答案: