把可滚动区域中-某个子元素平滑滚动到可视区域正中间位置

如何把可滚动区域中-某个子元素平滑滚动到可视区域正中间位置

不废话,直接上公式:

    // parentEl代表父元素,也就是设置了overflow为可滚动的元素
    // childEl代表需要滚动到父元素正中间的直接子元素

    // 水平滚动
    let x = childEl.offsetLeft - parentEl.clientWidth + parentEl.clientWidth/2 + childEl.clientWidth/2;
    parentEl.scrollTo({
        left: x,
        behavior: "smooth",
    });

    // 垂直滚动
    let y = childEl.offsetTop - parentEl.clientHeight + parentEl.clientHeight/2 + childEl.clientHeight/2;
    parentEl.scrollTo({
        top: y,
        behavior: "smooth",
    });

你可能感兴趣的