http://jsfiddle.net/MeoMix/8zg2V/83/
次のjsFiddleがあります。長すぎるコンテキスト メニュー項目が表示されると、省略記号が表示されますが、マウスオーバーするとテキストがパンされます。
問題のコード:
//Provides helper methods for non-specific functionality.
define('helpers', [], function () {
'use strict';
return {
scrollElementInsideParent: function(element, parent) {
// Scroll the element if its too long to read.
$(element).mouseover(function () {
var distanceToMove = $(this).width() - $(parent).width();
console.log("My width and parent width:", $(this).width(), $(parent).width());
$(this).animate({
marginLeft: "-" + distanceToMove + "px"
}, {
// Just a feel good value; scales as the text gets longer
duration: 15 * distanceToMove,
easing: 'linear'
});
}).mouseout(function () {
$(this).stop(true).animate({ marginLeft: 0 });
});
}
};
ここでは、スクロールされている要素の幅とその親の幅をログに記録します。コンソール出力:
私の幅と親の幅: 360 230
しかし、これはメトリクスを見ると正しくないようです:
どうしてこれなの?