javascript - 修改 jQuery.ScrollTo 插件以将元素滚动到页面中心(垂直/水平)或尽可能靠近中心

Question

Link

当滚动到位于当前滚动位置左侧的元素时 - 只有一半元素可见。

理想情况下，整个元素应该是可见的，甚至位于页面的中心。

检查源代码后，插件如何决定停止滚动的时间并不是很明显。

我知道有一个偏移设置可用于调整最终滚动位置，但它仅在垂直轴上，并且元素的大小会有所不同，所以我不想每次都更改该设置，而是找到一个通用的解决方案自动考虑要滚动到的元素的大小/位置并将其居中。

Answer 1

我最终从头编写了一个小型轻量级实现。 它假定要滚动到的元素是可滚动容器的直接子元素。 它在 css transform-scale 上下文中工作，因为它不依赖于 $.position()

  function scrollIntoView($target) {
    var $parent = $target.parent(),
        top = parseInt($target.css('top')),
        left = parseInt($target.css('left')),
        height = $target.height(),
        width = $target.width(),
        bottom = top + height,
        right = left + width,
        xCenter = left + width / 2,
        yCenter = top + height / 2,
        sWidth = $parent[0].scrollWidth,
        sheight = $parent[0].scrollHeight,
        pWidth = $parent.width(),
        pHeight = $parent.height(),
        destLeft, destTop; // the destination values for scroll left and top of the parent

    // if element does not overfow on an axis, scroll to zero for that axis;
    destTop = bottom < pHeight ? 0 : bottom - pHeight / 2 - height / 4;
    destLeft = right < pWidth ? 0 : right - pWidth / 2 - width / 4;

    $parent.animate({ scrollLeft: destLeft, scrollTop: destTop }, 600);
}