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;
  }

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

相关推荐
晨枫阳9 小时前
前端VUE项目-day1
前端·javascript·vue.js
艾普阳科技11 小时前
解锁多对多关系设计:SnapDevelop助你轻松实现用户角色管理,效率提升100%!
vue.js
sunbyte11 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GithubProfies(GitHub 个人资料)
前端·javascript·css·vue.js·github·tailwindcss
Hijin11 小时前
快速搭建 Vite+vue3+TS+ESLint@9+Prettier+Husky@9+Commitlint 项目
前端·javascript·vue.js
无懈可击11 小时前
FormCreate低代码表单设计器 v3.3 版本发布,功能大更新!
vue.js·低代码·开源
独立开阀者_FwtCoder12 小时前
踩坑无数后,我终于总结出这份最全的 Vue3 组件通信实战指南
前端·javascript·vue.js
202613 小时前
12. npm version方法总结
前端·javascript·vue.js
用户876128290737413 小时前
mapboxgl中对popup弹窗添加事件
前端·vue.js
浩星14 小时前
vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
前端·vue.js·uni-app
wocwin14 小时前
uniapp 微信小程序Vue3项目使用内置组件movable-area封装悬浮可拖拽按钮(拖拽结束时自动吸附到最近的屏幕边缘)
vue.js·微信小程序