Javascript 羽毛笔：如何防止工具栏滚动并设置高度？

我正在尝试在上跟踪示例，但在设置编辑器框的高度和防止工具栏滚动到屏幕外时遇到问题

我的代码是：

<div id="editorcontainer" style="height:10em; min-height:100%; overflow-y:auto;">
   <div id="editor" name="editor" style="min-height:100%; height:auto;"></div>
</div>

<script>
  var quill = new Quill("#editor",{
     modules: {
       toolbar: [ ... ]
         },
         scrollingContainer: "#editorcontainer",
         theme: "snow"
     });
</script>

var quill=新的quill（#编辑器）{
模块：{
工具栏：[……]
},
滚动容器：“#编辑器容器”，
主题：“雪”
});

JS Filddle可在

输出如下所示：

有两个问题：

工具栏不是固定的，会滚动

垂直滚动条始终有一个可滚动区域，即使编辑器为空

如何解决这两个问题

工具栏不是固定的，会滚动

您可以按如下方式更改工具栏的CSS：

.ql-toolbar {
    position: fixed;
    top: 0;
}

垂直滚动条始终有一个可滚动区域，即使编辑器为空

---

您可以降低编辑器的

min height

，使其低于容器（例如80%）

我的解决方案是添加一个附加的封装

div

和

position:relative

，为

ql工具栏

建立参考框架，该参考框架设置为

position:absolute

然后，

editorcontainer

会有一个

margintop:3em

来固定工具栏（当工具栏足够短，可以填充一行时）

.ql工具栏{位置：绝对；顶部：0；左侧：0；右侧：0}

---

工作小提琴位于

您需要修改quill的一个类

.ql-container.ql-snow {
  border: none;
  height: 150px;
  overflow: scroll;
}

---

我不得不修改quill的两个类以得到我想要的。像这样

.ql-container.ql-snow {
    height: auto;
}
.ql-editor {
    height: 150px;
    overflow-y: scroll;
}

---

对于那些在这个问题上有棱角的人

我建议您在style.css中添加此代码

.ql-toolbar {
  position: sticky;
}

.ql-container {
  overflow-x:auto;
  height: 300px; /* whatever you what */
}

---

谢谢，但它不能正常工作。这两种样式会使工具栏粘贴到物理页面的顶部，并且工具栏边界框会缩小，以仅适合可见的项目，而不是跨越整个水平宽度。你能试试用叉子叉我的小提琴吗？

.ql-toolbar {
  position: sticky;
}

.ql-container {
  overflow-x:auto;
  height: 300px; /* whatever you what */
}