Summernote 非引导版本的滚动问题答案

【问题标题】：Summernote non-bootstrap version problems with scrollSummernote 非引导版本的滚动问题
【发布时间】：2018-11-24 12:35:03
【问题描述】：

我在我的项目中发现了一些奇怪的错误，例如在summernote网站example：

#content {
  width: 100%;
  padding: 50px 0;
  height: 150px;
}

#summernote {
  width: 100%;
  height: 100%;
}

<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.js"></script>
</head>
<body>
<div id="content">
  <div id="summernote"></div>
		<script>
      $('#summernote').summernote({
        placeholder: 'Write your blog content here...',
        tabsize: 1,
        height: 100,
        focus: true
      });
    </script>
</div>
</body>
</html>

尝试在全窗口中打开此示例并将编辑器的大小调整为大于全窗口高度。尝试向下滚动，您会遇到一些错误，在您使用按钮滚动选项卡后它会向上移动。

在我的项目中也是这样，但我添加了额外的 div，现在当我使用按钮滚动选项卡时，我的编辑器会隐藏除边框之外的所有内容 - 这是一个屏幕截图：

【问题讨论】：

标签： javascript jquery html css summernote

【解决方案1】：

只需在summernote选项中设置followingToolbar: false,：

$('#summernote').summernote({
    placeholder: 'Write your blog content here...',
    tabsize: 1,
    height: 100,
    focus: true,
    followingToolbar: false,
});

【讨论】：

【解决方案2】：

您的 gif 图像提出的问题是： https://github.com/summernote/summernote/issues/3126#issue-399125267

答案是：

只需更改 summernote-lite.js - 从此：-

if ((currentOffset > activateOffset) && (currentOffset < deactivateOffsetBottom)) {
this.$toolbar.css({
position: 'fixed',
top: otherBarHeight,
width: editorWidth
});
}

到这里：-

if ((currentOffset > activateOffset) && (currentOffset < deactivateOffsetBottom)) {
this.$toolbar.css({
position: 'relative',
top: otherBarHeight,
width: editorWidth
});
}

此更改对我有用... https://github.com/summernote/summernote/issues/3126#issuecomment-466647611

【讨论】：