Question

我有一个功能可以在点击时将点移动到屏幕中央。执行此操作的功能如下所示：

// 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是实际点的宽度。 Here is a codepen so you can see the issue

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

我对为什么会发生这种情况感到有些困惑，因为当我调用 moveToCenter 时，点还没有移动，所以它应该具有相同的位置我点击可点击元素的地方。

有谁知道为什么会这样？

Answer 1

对不起，我不认为我完全理解你的问题，但我能把所有事情都集中在一起。

首先禁用body填充：

body {
  padding: 0;
}

然后将距离改为：

distance = options.center - rect.left - 18/2

我希望这会有所帮助。

修改

好的，我只是不明白。这里的问题是泡沫中心和外盒是不同的元素。使用console.log(e.target)进行测试。您使用getBoundingClientRect()来查找必须移动的元素，在这种情况下，它会以不同方式移动。如果您不需要外盒，则可以更改：

<a href="#" ng-click="moveToCenter($event, true)"> <div class="point" ng-class="{ 'active': item.active }" style="background-color: {{ item.color }}" ng-click="moveToCenter($event, true)"></div> </a>

要：

<a href="#" ng-click="moveToCenter($event, true)" class="point" ng-class="{ 'active': item.active }" style="background-color: {{ item.color }}"> </a>

这样只有气泡可以作为点击区域。

点击元素可更改其位置

1 个答案: