@antv/x6 要求不显示水平滚动条，并且如果水平方向上显示不全的节点，则要求自动显示全部节点，垂直方向可以出现滚动条来滚动显示所有的节点。

本文主要是介绍@antv/x6 要求不显示水平滚动条，并且如果水平方向上显示不全的节点，则要求自动显示全部节点，垂直方向可以出现滚动条来滚动显示所有的节点。，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、要求一共有二个：

要求一：水平滚动条不显示。之前的文章中就已经发表过，可以用Scroller的className来处理。
要求二：水平方向上显示全部节点，如果有显示不全的节点（即看不到的节点）要求能够显示出来，垂直方向的滚动条可以显示出来，然后用滚动条来滚动显示下面看不到的节点。

2、思路：

思路一：水平不显示滚动条。vue3 @antv/x6 使用画布滚动条以后的几个问题的解决_antv x6超出屏幕滚动条-CSDN博客

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

思路二：水平方向上显示所有节点。

可以通过节点的视口的坐标与容器的宽度进行比较，查看是否已经超过，如果超过，就需要重新处理容器的rect，这样就可以了。

// 自定义函数来检测节点是否完全显示function isNodeCompletelyVisible(node) {const bbox = node.getBBox(); // 获取节点的包围盒// const viewport = graph.getContentArea(); // 获取画布视口// console.log(bbox.x, viewport.x, bbox.right, viewport.x + viewport.width);// 检查节点的四个角是否都在视口内return (// bbox.x > viewport.x &&// bbox.y > viewport.y &&// bbox.right < viewport.x + viewport.width &&// bbox.bottom < viewport.y + viewport.height// bbox.x > viewport.x && bbox.right > viewport.x + viewport.widthbbox.x > unref(containerWidth));}

注掉的部分是baidu ai生成的代码，实测还是有些问题，与我们项目的要求还是不太相符。

通过实测，发现bbox.x > unref(containerWidth)，这样就会返回true，那么我们就要重新设置rect来达到显示所有节点的效果。

const containerWidth = ref(0);

function resizeFitContent() {let nodes = graph.getNodes();let reqResize = false;nodes.forEach((node) => {if (!reqResize) {reqResize = isNodeCompletelyVisible(node);}});if (reqResize) {let rect = graph.getContentArea();// console.log(rect.x, rect.y, rect.width, rect.height);//下面是我们实测的padding与rect，需要根据自己项目的实际情况进行调整。graph.zoomToRect({x: rect.x - 10,y: rect.y,width: rect.width + 20,height: viewState.height - 100,},{padding: {top: '0px',right: '30px',bottom: '0px',left: '30px',},},);}

3、最好上张图，来明确下效果：

一开始只显示了四个节点，然后我们通过检测要不要自动调整以适应画布，然后看到所有的节点。