Слайдер Mousemove при изменении размера окна

Question

Я использую полнофункциональный полноразмерный ползунок перемещения мыши (https://jsfiddle.net/nLwb72d0/) (Оригинал от Райана Брэкет: http://jsfiddle.net/RyanBrackett/FSsC9/).). Как только я уменьшу размер окна браузера, размеры контейнеровизменение, из-за которого перемещение мыши перестает быть корректным.

Я уже пытался вызвать ту же функцию при изменении размера окна. Это приводит к тому, что ползунок не останавливается, чтобы дергаться.

Я такжепопытался обновить переменные при изменении размера окна. К сожалению, это не удалось.

$(function () {

    var $bl = $(".item-photo"),
        $th = $(".item-photo-wrapper"),
        blW = $bl.outerWidth(),
        blSW = $bl[0].scrollWidth,
        wDiff = (blSW / blW) - 1, // widths difference ratio
        mPadd = 20, // Mousemove Padding
        damp = 20, // Mousemove response softness
        mX = 20, // 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

        $(window).on('resize', function(){
            blW = $bl.outerWidth(),
          blSW = $bl[0].scrollWidth,        
            mmAA = blW - (mPadd * 2), // The mousemove available area
            mmAAr = (blW / mmAA); //        
        });



    $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;
        $th.css({
            marginLeft: -posX * wDiff
        });
    }, 10);
});

Answer 1

Похоже, вы забыли пересчитать wDiff при изменении размера окна. Я бы порекомендовал вам немного изменить рефакторинг, чтобы вам не приходилось дважды записывать вычисления в своем коде. Например, создайте функцию для обработки вычислений, а затем просто вызывайте ее всякий раз, когда вам нужно обновить их, а не выписывайте их для инициализации и изменения размера.

То, что я имею в виду под этим, выглядит так:

var recalcSlider = function () {
    blW = $bl.outerWidth();
    blSW = $bl[0].scrollWidth;
    wDiff = (blSW / blW) - 1; // widths difference ratio
    mmAA = blW - (mPadd * 2); // The mousemove available area
    mmAAr = (blW / mmAA);
}

$(window).on('resize', recalcSlider); // calls it on resize
recalcSlider(); // calls it upon initialization

... и тогда вы можете просто инициализировать ваши переменные в 0 оттуда.