调用原生的scrollTo方法无法生效

[ChuZexx]

有个需求,使用实例的scrollTo方法,想默认随着内容的增多滚动到底部,但是无法生效.我直接使用codemirror的该方法是可以的

[rennzhang]

请提供 demo，我无法复现这个问题。

我用定时器模拟测试没有问题，或者你可以尝试在组件上添加 :KeepCursorInEnd="true" 属性

    setInterval(() => {
      code.value += "test \n";
    }, 1000);

     onChange(val, instance) {
       const scrollInfo = instance.getScrollInfo();
       instance.scrollTo(scrollInfo.left, scrollInfo.height);
     }

[ChuZexx]

请提供 demo，我无法复现这个问题。

我用定时器模拟测试没有问题，或者你可以尝试在组件上添加 :KeepCursorInEnd="true" 属性

    setInterval(() => {
      code.value += "test \n";
    }, 1000);

     onChange(val, instance) {
       const scrollInfo = instance.getScrollInfo();
       instance.scrollTo(scrollInfo.left, scrollInfo.height);
     }

我的demo如下, 我使用的是vue3+vite2,如果你的文档所示, 好像依旧无法滚动滚动条.

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    placeholder="test placeholder"
    :height="500"
    KeepCursorInEnd
    @change="change"
  />
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Codemirror from "codemirror-editor-vue3";
// plugin-style
import "codemirror-editor-vue3/dist/style.css";

// language
import "codemirror/mode/javascript/javascript.js";

// theme
import "codemirror/theme/dracula.css"

const code = ref('')
const cmOptions = {
  mode: 'text/javascript', // Language mode
  theme: 'dracula', // Theme
  lineNumbers: true, // Show line number
  smartIndent: true, // Smart indent
  indentUnit: 2, // The smart indent unit is 2 spaces in length
  foldGutter: true, // Code folding
  styleActiveLine: true, // Display the style of the selected row
}

const change = (msg, cm) => {
  console.log(cm);
  const scrollInfo = cm.getScrollInfo();
  cm.scrollTo(scrollInfo.left, scrollInfo.height);
}

setInterval(() => {
  code.value += "test \n";
}, 300);

onMounted(() => {

})

</script>
<style lang="less" scoped>
</style>

[rennzhang]

我试了你的代码，确实有这样的问题，但是我没有找到是什么原因导致的，但我修复了KeepCursorInEnd属性不生效的问题，今天测试后会发布一个版本

[ChuZexx]

我试了你的代码，确实有这样的问题，但是我没有找到是什么原因导致的，但我修复了KeepCursorInEnd属性不生效的问题，今天测试后会发布一个版本

好的,谢谢.我自己找了两种方法可行,一种是直接用codemirror实例在计时器里面去scrllTo,另一种就是在change里面去拿到滚动高度,再用watch去scrollTo.都可以,就是直接在change回调里用实例滚动不行.如果可以,真心希望找出原因.

[rennzhang]

我仍然没有找到问题所在，但我在内部曲线解决了这个问题，现在你可以手动控制 scroll，或者使用KeepCursorInEnd属性，请更新到最新版本