Javascript 为什么在mousemove上设置scrollLeft和scrollTop会导致max scroll*意外提前？

在回答时，我发布了一个简单的演示，演示了如何通过和的操作实现子

相对于其父

中光标的移动

我的演示基本上按照预期工作，演示了在via和上收集光标坐标的基础知识，做了一些数学运算来计算较大的

.internal

子对象应移动的比率，并应用

滚动*

然而我注意到，当将光标移动到

外部

父对象的底部和/或右侧时，

内部

子对象将在光标到达边缘之前滚动到最大值

我做了什么来找到解决方案？
意识到

event.pageX

始终至少小于

1

，并且永远不超过

1

小于

宽度

，并且

event.pageY

永远不超过

1

小于父

高度
，我添加了一个基本函数，将坐标范围从
0
扩展到整个
width
和/或
height


尽管该函数完成了它的工作，但它并没有纠正过早的最大滚动次数

编辑：我没有在外部测试过这段代码，因此根据是否正在编辑、正常查看或扩展，这些代码片段似乎以不同的方式呈现HTML；有时函数是必需的，有时它的存在会导致负值

scrollTop

不响应负值；相反，它将自身设置回

0

如果设置为大于元素可用最大值的值，

scrollTop

将自身设置为最大值

同样的情况也适用于

scrollLeft

所以这种不一致性是不相关的；在我添加函数之前，问题已经很明显了

还有什么？
我反复检查了数学题，例如

• 假设我们有一位家长通过

  100px

  测量

  100px

• 和一个子
  通过

  300px

  测量

  300px

  （两个轴上的父轴的3倍）
• 如果光标在坐标上<代码>{x:90，y:90}

• scrollTop

  应设置为

  90*3

  =

  270

• 和

  scrollLeft

  应设置为

  90*3

  =

  270

• 因此，子
  的底部或右侧边缘应与父级的底部或右侧边缘对齐

考虑到这一点，正如我所说，我已经检查了一遍又一遍，数学应该是可行的，但结果出乎意料

这里是代码，一些额外的位输出了

innerHTML

中的一些数字（控制台有点妨碍），我的问题将在下面继续。额外的

用户界面不会影响结果

const divs=document.queryselectoral（“div”），
外部分区=分区[0]，
outer\u div\u style=window.getComputedStyle（outer\u div），
内部div样式=window.getComputedStyle（divs[1]），
outer\u div\u width=parseInt（outer\u div\u styles.width），
外部分割高度=parseInt（外部分割高度），
尺寸比={
x:parseInt（内部分区样式.width）/外部分区宽度，
y:parseInt（内部分割样式高度）/外部分割高度
},
半圆形=外部分区宽度/2，
一半odh=外部分区高度/2，
expandCoords=函数（e）{//有时有用，但从不有害
var X=e.pageX，
Y=e.pageY；
如果（X<一半的odw）{
X-=1；
}否则，如果（X>一半的odw）{
X+=1；
}
如果（Y<一半的odh）{
Y-=1；
}否则，如果（Y>一半的odh）{
Y+=1；
}
返回{x:x，y:y}；
},
//为了演示方便
输出=document.querySelector（“输出”）；
外部分区addEventListener（“mousemove”，函数（evt）{
evt=expandCoords（evt）；
//为了演示方便
output.innerHTML=“Coords:x:+evt.x+”，y:+evt.y+”
“+
“scrollLeft=“+（evt.x*维度_比率.x）+”
”+
“scrollTop=“+（evt.y*尺寸比y）；
外部分区滚动左=evt.x*尺寸比.x；
外部分区滚动顶部=evt.y*尺寸比y；
}，假）
正文{
溢出：隐藏；
保证金：0；
}
.外部{
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
.内部{
宽度：1000vw；/*10倍于其父级宽度*/
高度：500vh；/*5倍于其父级高度*/
框阴影：嵌入0 0 20px 20px绿色；/*无边框边缘高亮显示*/
背景：径向梯度（白色、黑色）；
}
/*为了演示方便*/
输出{
位置：绝对位置；
顶部：10vh；
左：10vw；
字体系列：Consolas，monospace；
背景：白色；
填充物：2em.4em.3em；
游标：默认值；
}
我想出来了
scrollTop
和
scrollLeft
是在各自的轴上滚动多少像素的度量值。

这相当于在视图外滚动了多少，因此总有一部分剩余的内容无法滚动。

该金额等于母公司的相应计量单位


如果子级
的大小是父级的两倍，则当在任一轴上滚动到其最大值时，将只滚动一半
如果子项的大小是最大滚动的三倍，则将滚动三分之二
10
乘以大小：
9/10
滚动等

在此特定应用程序中，光标坐标应为mu