mouseMove上的水平滚动 - 较小div中的宽div与溢出：隐藏（无法使数学工作）

Posted 2021-05-04

我试图制作一个图像拇指的“线”，它在鼠标移动时滚动。我得到了它的工作，但我现在的问题是，我想在侧面做一个“填充”，所以我不必将鼠标一直到两侧看到第一个/最后一个拇指。但我真的无法让它工作：/

这是我现在的脚本：

// 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);
    }
});

有些地方我尝试添加偏移量（注释掉内联），其中一些让它在一端工作而不是另一端：/

我很确定这是数学中的问题，但我无法弄清楚我应该做什么：/

这是一个jsFiddle：http://jsfiddle.net/6CJfs/1/

我希望我的问题足够清楚，不知道如何解释它，并希望有人可以帮助:)

答案

你的脚本不流畅，所以我完全修改了它（对不起:) 用一个非常简单的方法：

LIVE DEMO

超级简单的jQ：

$(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);

});

添加到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 */
}