Cuộn ngang trên chuộtXoá - rộng div trong div nhỏ hơn với tràn: ẩn (Không thể có được phép toán để hoạt động)

Question

Tôi đang cố gắng tạo một "đường thẳng" của các hình ngón tay cái, nơi nó cuộn trên mousemove. Và tôi đã làm việc đó, nhưng vấn đề của tôi bây giờ là tôi muốn tạo ra một "đệm" ở hai bên vì vậy tôi không cần phải di chuột qua các bên để xem ngón tay cái đầu/cuối. Nhưng tôi thực sự thực sự không thể lấy nó để làm việc:/

Đây là kịch bản tôi có bây giờ:

// MouseMove scrolling on thumbs 
var box = $('.thumbs-block'), 
    innerBox = $('.thumbs'), 
    lastElement = innerBox.find('a:last-child'); 

var offsetPx = 100; 
var boxOffset = box.offset().left; 

var boxWidth = box.width() /* - (offsetPx*2)*/; 
var innerBoxWidth = (lastElement[0].offsetLeft + lastElement.outerWidth(true)) - boxOffset /* + (offsetPx*2)*/; 

scrollDelayTimer = null; 
box.mousemove(function (e) { 
    console.log('boxWidth: ' + boxWidth + ' innerBoxWidth: ' + innerBoxWidth + ' box.scrollLeft(): ' + box.scrollLeft()); 

    var mouseX = e.pageX; 
    var boxMouseX = mouseX - boxOffset; 

    if ((boxMouseX > offsetPx) && (boxMouseX < (boxWidth - offsetPx))) { 
     var left = (boxMouseX * (innerBoxWidth - boxWidth)/boxWidth) /* - offsetPx*/; 

     clearTimeout(scrollDelayTimer); 
     scrollDelayTimer = setTimeout(function() { 
      scrollDelayTimer = null; 
      box.stop().animate({ 
       "scrollLeft": left 
      }, { 
       queue: false, 
       duration: 500, 
       easing: 'linear' 
      }); 
     }, 10); 
    } 
}); 

Có một số trong những nơi tôi đã cố gắng thêm (chú thích inline) bù đắp , một số trong đó được nó làm việc trong một đầu nhưng không phải là khác:/

tôi khá chắc chắn rằng đó là một vấn đề trong toán học, nhưng tôi không thể tìm ra những gì tôi nên làm:/

Dưới đây là a jsFiddle: http://jsfiddle.net/6CJfs/1/

Tôi hy vọng tôi đã giải quyết được vấn đề của mình đủ rõ ràng, không chắc chắn cách giải thích cách khác, và hy vọng ai đó có thể giúp :)

Answer 1

Kịch bản của bạn không trơn tru, vì vậy tôi đã sửa đổi hoàn toàn (xin lỗi :)
cách tiếp cận:

LIVE DEMO

JQ siêu đơn giản:

$(function(){ 

    var $bl = $(".thumbs-block"), 
     $th = $(".thumbs"), 
     blW = $bl.outerWidth(), 
     blSW = $bl[0].scrollWidth, 
     wDiff = (blSW/blW)-1, // widths difference ratio 
     mPadd = 60, // Mousemove Padding 
     damp = 20, // Mousemove response softness 
     mX  = 0, // Real mouse position 
     mX2 = 0, // Modified mouse position 
     posX = 0, 
     mmAA = blW-(mPadd*2), // The mousemove available area 
     mmAAr = (blW/mmAA); // get available mousemove fidderence ratio 

    $bl.mousemove(function(e) { 
     mX = e.pageX - this.offsetLeft; 
     mX2 = Math.min(Math.max(0, mX-mPadd), mmAA) * mmAAr; 
    }); 

    setInterval(function(){ 
     posX += (mX2 - posX)/damp; // zeno's paradox equation "catching delay"  
     $th.css({marginLeft: -posX*wDiff }); 
    }, 10); 

}); 

Thêm vào CSS:

.thumbs-block { 
    position:relative; /* THIS LINE */ 
    overflow: hidden; 
    background: #ccc; 
    margin: 0 5px; 
    width: 714px; 
    height:142px;  /* THIS LINE */ 
} 
.thumbs{ /* ALL */ 
    position:absolute; 
    margin-left:0;  /* WILL BE CONTROLLED BY jQ */ 
}