求助：解决summernote-lite.min.js工具栏滚动与下拉菜单显示异常问题

我之前在使用summernote-lite.min.js的时候也碰到过一模一样的问题——工具栏出现滚动条后，下拉按钮的选项被死死局限在工具栏的滚动区域里，用户得来回滚动工具栏才能看全选项，体验太差了！下面给你几个亲测有效的解决办法：

方法1：通过CSS让下拉菜单脱离工具栏滚动容器 #

这是最直接的修复方式，核心是让下拉菜单跳出设置了overflow:auto的工具栏容器，独立显示，同时给下拉菜单自身设置滚动：

/* 修复Summernote下拉菜单被工具栏滚动条裁剪的问题 */
.note-toolbar .dropdown-menu {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  max-height: 400px; /* 可根据需求调整下拉菜单的最大高度 */
  overflow-y: auto; /* 下拉菜单内容过多时内部滚动，不用动工具栏 */
}

原理是：默认情况下Summernote的工具栏容器为了适配小屏幕会设置overflow:auto，导致下拉菜单作为子元素被裁剪。用position:fixed让下拉菜单脱离这个容器的约束，就能正常显示在页面之上了。

方法2：调整工具栏布局，避免出现滚动条 #

如果不想改CSS，也可以通过修改Summernote的初始化配置，让工具栏自动换行或者精简按钮，从根源上避免工具栏出现滚动条：

$(document).ready(function() {
  $('#summernote').summernote({
    // 拆分工具栏为多行显示，减少单行按钮数量
    toolbar: [
      ['basic', ['bold', 'italic', 'underline', 'clear']],
      ['format', ['style', 'fontsize', 'color']],
      ['layout', ['ul', 'ol', 'paragraph']],
      ['insert', ['link', 'picture']],
      ['tools', ['codeview', 'help']]
    ],
    toolbarFixed: false, // 若开启固定工具栏导致布局冲突，可先关闭
    height: 300 // 按需设置编辑器高度
  });
});

把工具栏按钮分组拆成多行后，工具栏就不会因为按钮过多出现横向滚动条，下拉菜单自然就能正常展开了。

方法3：确保编辑器容器有足够宽度 #

有时候工具栏出现滚动条是因为编辑器所在的容器宽度太小，给容器设置合适的最小宽度就能解决：

/* 给Summernote容器设置最小宽度，避免工具栏挤压 */
#summernote {
  min-width: 768px; /* 根据你的页面布局调整这个值 */
}

你可以先试试方法1，一般都能快速解决问题，如果还有适配问题再结合方法2或3调整~

内容的提问来源于stack exchange，提问作者Umair Malik