鼠标移动时的水平滚动 - 在带有overflow:hidden的较小div中放置宽div（无法计算数学公式）

Question

鼠标移动时的水平滚动 - 在带有overflow:hidden的较小div中放置宽div（无法计算数学公式）

9

我正在尝试制作一个图像缩略图的“行”，其中它在鼠标移动时滚动。我已经让它工作了，但现在我的问题是我想在两侧做一个“填充”，这样我就不必一直把鼠标移到边缘才能看到第一个/最后一个缩略图。但我真的真的不能让它工作：/

这是我现在拥有的脚本：

// 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/

我希望我能清楚地表达我的问题，否则不知道该如何解释，希望有人能帮忙:)

- martindilling

从我的经验来看，你可以告诉程序内部框的大小比实际小一些，然后根据此设置scrolleft的最大值。 - Breezer

2个回答

-1

var $imgWrapper = $(".js-img-wrapper");
var $imgInnerWrapper;
var elementLength = 0;
var width = 0;
var elementRangeWidth = 0;
var saveShowedNumberOfElement = 1;

$imgWrapper.on("mouseenter", function() {
    $imgInnerWrapper = $(this).find(".js-img-inner");
    elementLength = $imgInnerWrapper.children().length;
    width = $(this).outerWidth();
    elementRangeWidth = width / elementLength;
}).on("mousemove", function(e) {
    var mousePosition = e.pageX - $(this).offset().left;
    if (mousePosition > 0 && mousePosition <= width) {
        var showedNumberOfElement = Math.ceil(mousePosition / elementRangeWidth);

        if (saveShowedNumberOfElement !== showedNumberOfElement) {
            saveShowedNumberOfElement = showedNumberOfElement;
            var imagePositionOffset = -width * (showedNumberOfElement - 1);
            $imgInnerWrapper.css({
                transform: "translateX("+ imagePositionOffset +"px)"
            });
        }
    }
}).on("mouseleave", function() {
    $imgInnerWrapper.css({
        transform: "translateX(0px)"
    });

    $imgInnerWrapper = undefined;
    elementLength = 0;
    width = 0;
    elementRangeWidth = 0;
    saveShowedNumberOfElement = 1;
});

你可以在CodePen上观看它的工作方式。

- Valery Liubimov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · Accepted Answer

你的脚本不够流畅，所以我对它进行了完全修改（抱歉 :)
使用一种非常简单的方法：

$(function() {

  const $bl = $(".thumbs-block"),
    $th = $(".thumbs"),
    blW = $bl.outerWidth(),
    blSW = $bl.prop("scrollWidth"),
    wDiff = (blSW / blW) - 1, // widths difference ratio
    mPadd = 60, // Mousemove Padding
    damp = 20; // Mousemove response softness

  let posX = 0,
    mX2 = 0, // Modified mouse position
    mmAA = blW - (mPadd * 2), // The mousemove available area
    mmAAr = (blW / mmAA), // get available mousemove fidderence ratio
    itv = null;

  const anim = () => {
    posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"    
    $th.css({
      transform: `translateX(${-posX * wDiff}px)`
    });
  };

  $bl.on("mousemove", function(e) {
    const mouseX = e.pageX - $(this).prop("offsetLeft");
    mX2 = Math.min(Math.max(0, mouseX - mPadd), mmAA) * mmAAr;
  }).on("mouseenter", function(e) {
    itv = setInterval(anim, 10);
  }).on("mouseleave", function() {
    clearInterval(itv);
  });

});

.thumbs-block {
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

.thumbs-block .thumbs {
  display: flex;
  flex-flow: row nowrap;
}

<div class="thumbs-block">
  <div class="thumbs">
    <a class="thumb"><img src="http://placehold.it/120x120/0bf&text=01" /></a>
    <a class="thumb"><img src="http://placehold.it/120x120/f0b&text=02" /></a>
    <a class="thumb"><img src="http://placehold.it/120x120/bf0&text=03" /></a>
    <a class="thumb"><img src="http://placehold.it/120x120/b0f&text=04" /></a>
    <a class="thumb"><img src="http://placehold.it/120x120/fb0&text=05" /></a>
    <a class="thumb"><img src="http://placehold.it/120x120/0fb&text=06" /></a>
    <a class="thumb"><img src="http://placehold.it/120x120/0bf&text=07" /></a>
    <a class="thumb"><img src="http://placehold.it/120x120/f0b&text=08" /></a>
    <a class="thumb"><img src="http://placehold.it/120x120/bf0&text=09" /></a>
    <a class="thumb"><img src="http://placehold.it/120x120/b0f&text=10" /></a>
    <a class="thumb"><img src="http://placehold.it/120x120/fb0&text=11" /></a>
    <a class="thumb"><img src="http://placehold.it/120x120/0fb&text=12" /></a>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>