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.