Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

204
Visualizações
Has anyone encountered CodeMirror after adding a widget, it will scroll every time input

I have tested both chrome 96.0.4664.55 and Firefox 94.0.1. CodeMirror 5.48.2

The situation I encountered:

Set the height of CodeMirror, such as:

.CodeMirror {
  height: 200px;
}

then add widgets in the loop:

let addLineWidgetWithType = (line, addType) => {
  let widgets = cm.lineInfo(line).widgets
  if (widgets) {
    for (var i = 0; i < widgets.length; ++i) {
      if (widgets[i].node.className.includes(addType)) return false
    }
  }

  let node = document.createElement('hr')
  node.className = addType
  let lineWidget = cm.addLineWidget(line, node, { above: true })
  lineWidget.changed()
}

let removeLineWidgets = (line) => {
  let widgets = cm.lineInfo(line).widgets
  if (!widgets) return
  for (var i = 0; i < widgets.length; ++i) {
    widgets[i].clear()
  }
}

let checkLine = (cm) => {
  for (var line = 0; line <= cm.lastLine(); line++) {
    removeLineWidgets(line)
    if (line % 2 === 0) {
      addLineWidgetWithType(line, 'test')
    }
  }
}
const content = `
test
test
test
test
test
`

var cm = CodeMirror(document.querySelector('.editorContainer'), {
  theme:'default',
  lineNumbers: true,
  gutters: ['CodeMirror-linenumbers','CodeMirror-other-make'],
  value: content,
})

cm.on('change', (cm, change) => {
  checkLine(cm)
})
checkLine(cm)

cm.focus()
cm.setCursor(cm.lastLine(), 0)

Then every edit at the bottom of the document will scroll up, making the line where the cursor is invisible.

Here is a small demo. Just put cursor after the last symbol, press Enter and start typing.

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda