react 通过ref 获取对应 dom 的位置信息
需求：
- 在点击某个dom 元素的时候滚动条要同步滚动
进程：
- 获取ref 打印，打印出来是一个dom 元素，看不到有什么方法
- 查找 dom 属性信息
- 找到了两个参数，offsetLeft：返回元素的水平偏移位置。 offsetTop：返回元素的垂直偏移位置。
- 这两个参数都是基于父节点的，可以直接使用
this.cellMainBox.current.scrollTop = activeCell.offsetTop - 150
this.cellMainBox.current.scrollLeft = activeCell.offsetLeft - 150
拓展：
| 属性 / 方法 | 描述 |
|---|---|
| accessKey | 设置或返回元素的 accesskey 属性。 |
| addEventListener() | 将事件处理程序附加到元素。 |
| appendChild() | 向元素添加（附加）新的子节点。 |
| attributes | 返回元素属性的 NamedNodeMap。 |
| blur() | 从元素中移除焦点。 |
| childElementCount | 返回元素的子元素个数。 |
| childNodes | 返回元素子节点的 NodeList。 |
| children | 返回元素的子元素的 HTMLCollection。 |
| classList | 返回元素的类名。 |
| className | 设置或返回元素的 class 属性值。 |
| click() | 模拟鼠标单击元素。 |
| clientHeight | 返回元素的高度，包括内边距。 |
| clientLeft | 返回元素左边框的宽度。 |
| clientTop | 返回元素上边框的宽度。 |
| clientWidth | 返回元素的宽度，包括内边距。 |
| cloneNode() | 克隆元素。 |
| closest() | 在 DOM 树中搜索与 CSS 选择器匹配的最接近的元素。 |
| compareDocumentPosition() | 比较两个元素的文档位置。 |
| contains() | 如果节点是节点的后代，则返回 true。 |
| contentEditable | 设置或返回元素的内容是否可编辑。 |
| dir | 设置或返回元素的 dir 属性的值。 |
| firstChild | 返回元素的第一个子节点。 |
| firstElementChild | 返回元素的第一个子元素。 |
| focus() | 让元素获得焦点。 |
| getAttribute() | 返回元素属性的值。 |
| getAttributeNode() | 返回属性节点。 |
| getBoundingClientRect() | 返回元素的大小及其相对于视口的位置。 |
| getElementsByClassName() | 返回拥有给定类名的子元素的集合。 |
| getElementsByTagName() | 返回拥有给定标签名称的子元素的集合。 |
| hasAttribute() | 如果元素拥有给定属性，则返回 true。 |
| hasAttributes() | 如果元素拥有任何属性，则返回 true。 |
| hasChildNodes() | 如果元素有任何子节点，则返回 true。 |
| element.id | 设置或返回元素 id 属性的值。 |
| innerHTML | 设置或返回元素的内容。 |
| innerText | 设置或返回节点及其后代的文本内容。 |
| insertAdjacentElement() | 在相对于元素的位置插入新的 HTML 元素。 |
| insertAdjacentHTML() | 在相对于元素的位置插入 HTML 格式的文本。 |
| insertAdjacentText() | 在相对于元素的位置插入文本。 |
| insertBefore() | 在现有子节点之前插入新子节点。 |
| isContentEditable | 如果元素的内容是可编辑的，则返回 true。 |
| isDefaultNamespace() | 如果给定的 namespaceURI 是默认值，则返回 true。 |
| isEqualNode() | 检查两个元素是否相等。 |
| isSameNode() | 检查两个元素是否是同一个节点。 |
| isSupported() | 已弃用。 |
| lang | 设置或返回元素的 lang 属性值。 |
| lastChild | 返回元素的最后一个子节点。 |
| lastElementChild | 返回元素的最后一个子元素。 |
| matches() | 如果元素与给定的 CSS 选择器匹配，则返回 true。 |
| namespaceURI | 返回元素的命名空间 URI。 |
| nextSibling | 返回位于相同节点树层级的下一个节点。 |
| nextElementSibling | 返回位于相同节点树层级的下一个元素。 |
| nodeName | 返回节点的名称。 |
| nodeType | 返回节点的节点类型。 |
| nodeValue | 设置或返回节点的值。 |
| normalize() | 合并元素中相邻的文本节点，并移除空的文本节点。 |
| offsetHeight | 返回元素的高度，包括内边距、边框和滚动条。 |
| offsetWidth | 返回元素的宽度，包括内边距、边框和滚动条。 |
| offsetLeft | 返回元素的水平偏移位置。 |
| offsetParent | 返回元素的偏移容器。 |
| offsetTop | 返回元素的垂直偏移位置。 |
| outerHTML | 设置或返回元素的内容（包括开始标签和结束标签）。 |
| outerText | 设置或返回节点及其后代的外部文本内容。 |
| ownerDocument | 返回元素的根元素（文档对象）。 |
| parentNode | 返回元素的父节点。 |
| parentElement | 返回元素的父元素节点。 |
| previousSibling | 返回位于相同节点树层级的上一个节点。 |
| previousElementSibling | 返回位于相同节点树层级的上一个元素。 |
| querySelector() | 返回与 CSS 选择器匹配的第一个子元素。 |
| querySelectorAll() | 返回与 CSS 选择器匹配的所有子元素。 |
| remove() | 从 DOM 中移除元素。 |
| removeAttribute() | 从元素中移除属性。 |
| removeAttributeNode() | 移除属性节点，并返回移除的节点。 |
| removeChild() | 从元素中移除子节点。 |
| removeEventListener() | 删除已使用 addEventListener() 方法附加的事件处理程序。 |
| replaceChild() | 替换元素中的子节点。 |
| scrollHeight | 返回元素的整体高度，包括内边距。 |
| scrollIntoView() | 将元素滚动到浏览器窗口的可见区域。 |
| scrollLeft | 设置或返回元素内容水平滚动的像素数。 |
| scrollTop | 设置或返回元素内容垂直滚动的像素数。 |
| scrollWidth | 返回元素的整体宽度，包括内边距。 |
| setAttribute() | 设置或更改属性的值。 |
| setAttributeNode() | 设置或更改属性节点。 |
| style | 设置或返回元素 style 属性的值。 |
| tabIndex | 设置或返回元素的 tabindex 属性的值。 |
| tagName | 返回元素的标签名。 |
| textContent | 设置或返回节点及其后代的文本内容。 |
| title | 设置或返回元素的 title 属性值。 |
| toString() | 将元素转换为字符串。 |