JavaScript 实现祖先元素滚动条控制孙子元素居中显示

下面是一个可能的实现：

HTML代码：

<div id='ancestor' style='width: 400px; height: 300px; overflow: auto;'>
  <div id='parent' style='width: 800px; height: 600px;'>
    <div id='child' style='width: 200px; height: 200px; background-color: #ccc; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%);'>
      <div id='grandchild' style='width: 50px; height: 50px; background-color: #f00;'></div>
    </div>
  </div>
</div>

CSS代码：

#ancestor::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#ancestor::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 5px;
}

#parent {
  box-sizing: border-box;
}

#child {
  box-sizing: border-box;
}

#grandchild {
  box-sizing: border-box;
}

JS代码：

var ancestor = document.getElementById('ancestor');
var parent = document.getElementById('parent');
var child = document.getElementById('child');
var grandchild = document.getElementById('grandchild');

var ancestorWidth = ancestor.clientWidth;
var ancestorHeight = ancestor.clientHeight;
var parentWidth = parent.offsetWidth;
var parentHeight = parent.offsetHeight;
var childWidth = child.offsetWidth;
var childHeight = child.offsetHeight;
var grandchildWidth = grandchild.offsetWidth;
var grandchildHeight = grandchild.offsetHeight;

var scrollX = (parentWidth - ancestorWidth) / 2;
var scrollY = (parentHeight - ancestorHeight) / 2;

ancestor.scrollLeft = scrollX;
ancestor.scrollTop = scrollY;

grandchild.style.left = (ancestorWidth - grandchildWidth) / 2 + 'px';
grandchild.style.top = (ancestorHeight - grandchildHeight) / 2 + 'px';

首先，我们获取了祖先元素、父元素、子元素和孙子元素，并计算了它们的宽高。然后，我们计算了祖先元素需要滚动的距离，使得子元素能够在中心位置显示。接着，我们将祖先元素的滚动条滚动到相应位置，并将孙子元素的位置设置为祖先元素的中心位置。注意，我们使用了CSS伪元素::-webkit-scrollbar和::-webkit-scrollbar-thumb来美化滚动条的样式。