Javascript 如何构建一个可调整大小的DIV来处理overflow:auto？

我有一个可调整大小的DIV，它的四个面都可以调整大小。然而，在某些情况下，此DIV的内容可能超过其大小。所以我添加了选项overflow:auto，但是当我使用这个选项时，负责调整DIV大小的组件会随着滚动而移动

代码如下：

---

如何将组件始终固定在DIV的边缘上，以便在用户滚动DIV时不会移动组件？

您需要一个额外的容器来对齐点

可调整大小的函数（）{
var resizers=document.queryselectoral（'.n、.s、.w、.e、.nw、.ne、.se、.sw'）；
常数min=40；
for（设i=0；i最小值）{
element.style.width=（宽度/比例_x）+“px”；
}
如果（高度>最小值）{
element.style.height=（高度/刻度_y）+“px”；
}
if（parent.scrollTop最小值）{
element.style.height=（高度/刻度_y）+“px”；
}
如果（宽度>最小值）{
element.style.left=e.pageX-scroll_x-parent_x+parent_sx+'px'；
element.style.width=（宽度/比例_x）+“px”；
}
if（parent.scrollTop最小值）{
element.style.width=（宽度/比例_x）+“px”；
}
如果（高度>最小值）{
element.style.height=（高度/刻度_y）+“px”；
element.style.top=e.pageY-parent_y-scroll_y+parent_sy+'px'；
}
if（parent.scrollLeft最小值）{
element.style.left=e.pageX-parent_x-scroll_x+parent_sx+'px'；
element.style.width=（宽度/比例_x）+“px”；
}
如果（高度>最小值）{
element.style.height=（高度/刻度_y）+“px”；
element.style.top=e.pageY-parent_y-scroll_y+parent_sy+'px'；
}
}else if（currentResizer.classList.contains（'e'））{
const width=e.pageX-滚动\u x-子\u x；
如果（宽度>最小值）{
element.style.width=（宽度/比例_x）+“px”；
}
if（parent.scrollLeft最小值）{
element.style.height=（高度/刻度_y）+“px”；
}
if（parent.scrollTop最小值）{
element.style.width=（宽度/比例_x）+“px”；
element.style.left=（e.pageX-scroll_x-parent_x+parent_sx）+“px”；
}
}else if（currentResizer.classList.contains（'n'））{
常量高度=原始高度-（e.pageY-滚动-鼠标）；
如果（高度>最小值）{
element.style.height=（高度/刻度_y）+“px”；
element.style.top=e.pageY-parent_y-scroll_y+parent_sy+'px'；
}
}
}
//鼠标松开时停止
函数stopResize（e）{
第一（e）；
document.removeEventListener（'mousemove'，resize）；
}
}
}
可调整大小（）
正文{
宽度：1200px；
}
div{
位置：绝对位置；
美国银行