Vertical Scrollbar moves always to the middle

[andreasvh-conceto]

Describe the bug

Hello,

we have xmls/ other file contents with many lines which exceeds the screen size limit, we have to scroll. Since auto scroll is not configured in codemirror , we set the height to a fixed value. The scroll bar appears. But whenever i access a content, which exceeds the screen size the scrollbar allways moves to the middle. See the code in reproduction section.

Expected behaviour: The scrollbar begins at the top or at least it is configurable.

Screen resolution:

Thanks and best regards
Andreas

Reproduction

<codemirror
    v-model="some ultra long content with many lines where the screen height is not enough"
    basic
    disabled
    :style="{ height: '620px' }"
  />

System Info

System:
    OS: Linux 5.10 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
    Memory: 15.06 GB / 24.91 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
    pnpm: 8.6.7 - ~/.nvm/versions/node/v18.15.0/bin/pnpm
  npmPackages:
    dotenv-cli: ^7.2.1 => 7.3.0

Used Package Manager

npm

Validations

• Read the the documentation in detail.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[Slasher4k]

I have the same issue, as a workaround I scroll to the top when I handle the ready event

const handleReady = (payload) => {
   document.querySelector('.cm-activeLine').scrollIntoView();
}

[ngseke]

Not sure why, but it seems v-if on <Codemirror /> causes auto-scrolling to the middle.

For example:

<script setup>
import { ref } from 'vue'
import { Codemirror } from 'vue-codemirror'

const text = ref()

// Simulate a asynchronous request
setTimeout(() => {
  text.value = 'multiple lines\n'.repeat(100)
}, 500)
</script>

<template>
  <Codemirror
    v-if="text"
    :modelValue="text"
    :style="{ height: '300px' }"
  />
</template>

After removing v-if directive, it works as expected.

<template>
  <Codemirror
-   v-if="text"
    :modelValue="text"
    :style="{ height: '300px' }"
  />
</template>

[JaeTLDR]

const handleReady = (payload) => {
document.querySelector('.cm-activeLine').scrollIntoView();
}

I am using this version as scrollintoview was effecting my page

const handleReady = () => {
    const cm = document.querySelector('.cm-activeLine')
    if (cm?.scrollTop){
        cm.scrollTop = 0;
    }
}