要素をクリックすると位置が変わります

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 

。

EDIT

[OK]を、私は理解していませんでした。ここでの問題は、バブルセンターと外箱が異なる要素であることです。 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> 

をこの方法で唯一のバブルはクリック領域として機能するであろう。