关于html+css+js:把可滚动区域中某个子元素平滑滚动到可视区域正中间位置

80次阅读

共计 391 个字符,预计需要花费 1 分钟才能阅读完成。

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

不废话,间接上公式:

    // 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",
    });

正文完
 0