js controls the position of the scroll bar

js controls the position of the scroll bar

I encountered a problem today. scrollTop does not take effect when positioning the position of the scroll bar. After searching for the problem, I found that after setting the scroll property for the element, I directly set the position of the scroll bar of the element, which caused the element to be set when no child elements were propped up. The position of the scroll bar. At this time, there is no scroll bar. No matter how you print, the height of the scroll bar is always 0.
The following code is to render the graphics first to open the parent element, set the scroll property for the parent element, and set the position of the scroll bar

 private renderData = () => {
 		/* 图形渲染方法 */
        this.renderCanvas();
        /* 定位滚动条，要在图形渲染之后定位 */
        const dom = document.getElementById(this._para.container)
        dom!.style.overflow = "scroll"
        dom!.scrollTop = this._para.data.canvas.center.y
        dom!.scrollLeft = this._para.data.canvas.width / 2 - this._para.data.canvas.center._width / 2
}

Set element scrolling :

元素.style.overflow = "scroll"

Set the scrollbar position :

元素.scrollTop=数值
元素.scrollLeft=数值

Note : When setting the position of the scroll bar, the prerequisite for confirmation is that the scroll bar appears.