vue3 @antv/x6 使用画布滚动条以后的几个问题的解决

1、先上一个官方的图:https://x6.antv.antgroup.com/tutorial/plugins/scroller

2、然后再上个问题图,初始化以后,滚动条的位置在居中位置。

其实这里的滚动条的位置也是在中间,但我们要求是从最顶部开始,如果宽度够的话,不要显示水平滚动条。

3、初始化代码如下:

复制代码
import { Scroller } from '@antv/x6-plugin-scroller'

const graph = new Graph({
  background: {
    color: '#F2F7FA',
  },
})
graph.use(
  new Scroller({
    enabled: true,
  }),
)

4、然后我们来看一下Options:

5、我们来做一下选项的优化,让滚动条看上去还可以的样子:

代码如下:

复制代码
   graph.use(
      new Scroller({
        enabled: true,
        padding: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0,
        },
        pageVisible: false,
        pageBreak: false,
        autoResize: true,
        className: 'scrollerCss',
      }),
    );

这里面最主要有二个:

1)padding:设置上、右、下、左边距全设为0,不要留空白,当然这个根据实际情况进行调整。

2)className:自定义style,这里设置滚动条显示与否。

复制代码
.scrollerCss {
    overflow-x: hidden;
    overflow-y: auto;
  }

这样一设置,基本上可以满足项目需要了。

相关推荐
dy171719 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
索迪迈科技1 天前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
一只小风华~1 天前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
切糕师学AI1 天前
前后端分离架构中,Node.js的底层实现原理与线程池饥饿问题解析
前端·vue.js·node.js
书源1 天前
灵活性和可维护性,被严重低估的编程原则
前端·javascript·vue.js
计算机学姐1 天前
基于Python的旅游数据分析可视化系统【2026最新】
vue.js·后端·python·数据分析·django·flask·旅游
随风飞翔的胖子1 天前
js-cookie详细介绍及在vue3中的使用方法
vue.js·浏览器
幻灵尔依1 天前
前端编码统一规范
javascript·vue.js·代码规范
欢脱的小猴子1 天前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug
小菜全1 天前
Vue 3 + TypeScript 事件触发与数据绑定方法
前端·javascript·vue.js