单击某个元素会更改它's的位置

我有一个函数，单击时会将点移动到屏幕中心。这样做的函数看起来是这样的：

// Animates the slider
animate: function (startTime, distance, duration, options, completedFn) {
    // Animate
    requestAnimationFrame(function () {
        // Get our offset
        var now = Date.now(),
            timeDelta = Math.min(now - startTime, duration),
            timePercent = timeDelta / duration,
            offset = timePercent * distance;
        // Get our position
        var position = options.finalX + offset;
        // Create the transform
        options.transform = 'translateX(' + position + 'px)';
        // Add to our element
        options.element.style.transform = options.transform;
        // If our time is less than our duration
        if (timeDelta < duration) {
            // Animate again
            service.animate(startTime, distance, duration, options, completedFn);
        // If our time has exceeded our duration
        } else {
            // Set our options for scrolling
            options.finalX = position;
            options.oldX = options.currentX;
            options.currentX = options.currentX + (distance / options.width);
            // Invoke our callback
            completedFn();
        }
    });
},
// Moves the current active item to the center
moveToCenter: function (e, options, animate, completedFn) {
    // Exit if we are scrolling
    if (options.started)
        return;
    // Get the central position 
    var target = e.target,
        rect = target.getBoundingClientRect(),
        distance = options.center - rect.left - ((50 - 18) / 2), // Make these variables?
        positive = rect.left > options.center;
    console.log(rect);
    // If we should animation
    if (animate) {
        // Get our start points
        var distance = options.center - rect.left - ((50 - 18) / 2), // Make these variables?
            now = Date.now(),
            duration = Math.abs(distance) / 1;
        // Animate our elements
        service.animate(now, distance, duration, options, function () {
            completedFn(target);
        });
    // Otherwise
    } else {
        // Update the current position
        options.currentX = distance / options.speed;
        // Move our elements
        service.updateDragElement(options);
        // Invoke our callback
        completedFn(target);
    }
},

和我一起玩的是：

distance = options.center - rect.left - ((50 - 18) / 2), // Make these variables?

50是可点击元素的宽度，18是实际点的宽度。这是一个代码笔，所以你可以看到问题。

当你加载笔时，如果你点击粉红色方块右边的点，它会滚动到粉红色方块中。问题是，如果你在点的中心点击它，它实际上会滚动到上一个的确切位置，但如果你在点的左侧或右侧点击它（但仍然可以点击），它会稍微偏离你点击它的一侧。

我有点困惑为什么会发生这种情况，因为当我调用moveToCenter时，点还没有移动，所以无论我在可点击元素中单击何处，它都应该具有相同的位置。

有人知道为什么会发生这种事吗？