Mathlive中mathfield输入框垂直滚动功能不生效问题咨询

问题原因 #

MathLive 初始化生成的内置 math-field 元素默认会添加 overflow-y: hidden 样式，你给外层 .input 容器设置的垂直滚动属性无法作用到 MathLive 渲染的内部内容区域，所以导致垂直滚动失效。

解决方法 #

方案1：CSS 强制覆盖内置样式

在你的样式文件中新增如下规则，强制修改 MathLive 内部元素的滚动属性：

.input math-field {
  overflow-y: auto !important;
  height: 100% !important;
  max-height: 100% !important;
}

方案2：初始化时传入自定义样式配置

修改 MathLive 初始化代码，通过 customStyle 字段直接配置内置元素的样式：

componentDidMount() {
  document.body.append(this.container);
  this.editor = window.MathLive.makeMathField(this.editorRef.current, {
    customStyle: `
      :host {
        overflow-y: auto;
        height: 100%;
      }
    `,
    onKeystroke: (e, keyCode) => {
      if (keyCode == "[Space]") {
        this.insertLatex("\\,");
      }
    }
  })
}

注意事项 #

你当前样式中设置的高度是 18rem，如果需要的是180px，直接替换对应高度值即可。另外确认外层没有父元素设置 overflow: hidden 拦截滚动行为。

内容的提问来源于stack exchange，提问作者ankush tiwari