调整元素大小时，鼠标滚轮滚动坐标松散：需要使用CSS或JavaScript修复

Question

我有这样的布局：

<article>
<section id="svgContent"></section>
<section id="content"></section>
</article>

svgContent是一个svg元素，可以按需扩展-在我的情况下是一个连接图。

content部分的元素包含一个页面，是普通的html内容-用户浏览svgContent时可以刷新内容，例如：

$('Content').empty()
// append new content

我的布局分为两部分：

• svg占据整个页面：{width:100vw; height: 100vh;}-全屏；
• 内容显示在图形的旁边：{width: 60%; }-它可以垂直滚动

将鼠标滚轮侦听器附加到svgContent，以进行缩放： 缩放将调整整个svg对象相对于与当前鼠标坐标匹配的内部<g>元素的大小。

已编辑

当窗口的滚动为0或x时，Contenting boundingBox的y为0时，缩放效果很好：

window.scrollY = 0
document.getElementById('content') = {  // 0 }

在“内容”部分上滚动将导致window.scrollY发生更改，而在svgContent上（通过滚轮滚动）将使其保持不变。

这就是为什么从上一个问题中，我观察到在以下情况下缩放效果良好：

• 第一次加载内容，并且内容页面未滚动
• 不显示内容页面（display:none）
• 内容页面不在屏幕（transform: translateY(-139%);）

缩放UX中断：

• 我开始向下滚动“内容”部分

用于缩放的UX中断不再根据svgContent的当前元素（鼠标指针位于其上）调整大小。

如何确定svgContent相对于当前鼠标坐标的大小，而忽略由于在其他页面元素上滚动而导致的页面滚动值？

我更喜欢CSS解决方案：

我尝试通过将transform-orgin设置为svgContent来抵消window.scrollY的值，但没有成功。

或者，一种JS解决方案，可能比将滚动集中在svgContainer上时在其他页面元素上取消绑定和鼠标滚轮更简单-在触摸设备上也应能很好地工作。