父元素设置固定宽高设置滚动条属性子元素超出父元素的宽高父元素出现滚动条此时父元素的滚动条滚动到什么位置显示子元素的中心位置求js计算

假设父元素的宽高为parentWidth和parentHeight，子元素的宽高为childWidth和childHeight，父元素滚动条滚动的距离为scrollX和scrollY。

首先需要计算子元素的中心点坐标，假设子元素左上角坐标为(childX, childY)，则中心点坐标为：

centerX = childX + childWidth / 2 centerY = childY + childHeight / 2

接下来需要计算父元素滚动条需要滚动的距离，使得子元素的中心点在父元素的可视区域中央。如果子元素在父元素的左上角，则滚动条不需要滚动。

需要分别计算水平方向和垂直方向的滚动距离。假设父元素滚动条的宽度和高度分别为scrollbarWidth和scrollbarHeight，则可视区域的宽度和高度为：

visibleWidth = parentWidth - scrollbarWidth visibleHeight = parentHeight - scrollbarHeight

如果子元素的中心点在可视区域内，则无需滚动。如果子元素的中心点在可视区域外，则需要计算滚动距离。

水平方向的滚动距离为：

if (centerX < scrollX + visibleWidth / 2) { // 子元素在滚动条左侧 deltaX = centerX - (scrollX + visibleWidth / 2) } else if (centerX > scrollX + parentWidth - visibleWidth / 2) { // 子元素在滚动条右侧 deltaX = centerX - (scrollX + parentWidth - visibleWidth / 2) } else { // 子元素在可视区域内 deltaX = 0 }

垂直方向的滚动距离类似：

if (centerY < scrollY + visibleHeight / 2) { // 子元素在滚动条上方 deltaY = centerY - (scrollY + visibleHeight / 2) } else if (centerY > scrollY + parentHeight - visibleHeight / 2) { // 子元素在滚动条下方 deltaY = centerY - (scrollY + parentHeight - visibleHeight / 2) } else { // 子元素在可视区域内 deltaY = 0 }

最后，将水平和垂直方向的滚动距离应用到父元素的scrollTop和scrollLeft属性上即可：

parent.scrollTop += deltaY parent.scrollLeft += delta