测验：如何防止工具栏滚动和设置高度？

Question

我正在尝试跟踪https://quilljs.com/playground/#autogrow-height上的示例，但是在设置编辑器框的高度并阻止工具栏滚动到屏幕外时遇到问题。

我的代码是：

interface MathInterface{

int sum();


}  

class A implements MathInterface
{
@Override
int sum()
{

//implementation
}

}
class B implements MathInterface
{
@Override
int sum()
{

//implementation
}

}

class Main
{

MathInterface mathInterface=new B();

doSomeThing(mathInterface);


} 

可以在https://jsfiddle.net/OldGeezer/xpvt214o/556844/上找到JS Filddle

输出看起来像这样：

有两个问题：

1. 工具栏未固定并滚动。
2. 即使编辑器为空，垂直滚动条也始终具有可滚动区域。

我该如何解决这两个问题？

Answer 1

我必须修改羽毛笔的两个类才能得到想要的东西。像这样

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

Answer 2

  

  
1. 工具栏未固定并滚动。
  

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

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

  

  
1. 即使编辑器为空，垂直滚动条也始终具有可滚动区域。
  

您可以降低编辑器的min-height，使其低于容器（例如80％）。

Answer 3

我的解决方案是用div添加一个附加的封装position:relative来为ql-toolbar建立参考框架，并将其设置为position:absolute。

然后editorcontainer被赋予margin-top:3em来固定工具栏（当它足够短以填充一行时）。

<div style="position:relative;margin-top:5em;">
  <div id="editorcontainer" style="height:10em; min-height:100%; 
         overflow-y:auto;margin-top:3em">
     <div id="editor" style="min-height:100%; height:auto;"></div>
  </div>
</div>

<style>
  .ql-toolbar { position: absolute; top: 0;left:0;right:0}
</style>

正在工作的小提琴在https://jsfiddle.net/OldGeezer/oLq2bnzv/

Answer 4

您将需要修改羽毛笔的课程之一

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

Answer 5

对于在这个问题中遭受 Angular quill 困扰的人，

我建议你在 style.css 中添加这段代码。

.ql-toolbar {
  position: sticky;
}

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