Помогите остановить прокрутку после каждого блока

Тема в разделе "JavaScript", создана пользователем DimonFreeman, 7 ноя 2019.

Метки:
  1. DimonFreeman

    DimonFreeman Постоялец

    Регистр.:
    25 авг 2014
    Сообщения:
    81
    Симпатии:
    10
    Лендинг с 4-я блоками. Хочу что бы листать можно было только по одному, без разницы сколько прокрутишь мишкой. В данный момент перелистывает 1-2-3. подскажите как исправить..
    Скидываю весь код.
    Так как завязан скрол+toolbar с точками которым тоже переключить можно.

    var __cancel = {
    cancel: function() {}
    };
    var se1 = wrap(1, function() {
    $('.hr1')[0].click();
    $('#body').removeClass('black_line');
    //$( "#indiv" ).slider( "value", 170 );
    });
    var se2 = wrap(2, function() {
    $('#body').removeClass('black_line');
    $('.hr2')[0].click();
    //$( "#indiv" ).slider( "value", 120 );
    });
    var se3 = wrap(3, function() {
    $('#body').removeClass('black_line');
    $('.hr3')[0].click();
    //$( "#indiv" ).slider( "value", 70 );
    });
    var se4 = wrap(4, function() {
    $('#body').addClass('black_line');
    $('.hr4')[0].click();
    //$( "#indiv" ).slider( "value", 20 );
    // $('#body').animate({scrollTop: $('#inner').height()}, 500, 'swing' );
    });


    (function() {
    var ignore;
    var stateIndex = 0;
    var states = [se1, se2, se3, se4];
    var _throttle = delayOne(function(e) {
    var _stateIndex = stateIndex + (e.originalEvent.deltaY > 0 ? 1 : -1);
    var state = states[_stateIndex];
    if (!state) return;
    stateIndex = _stateIndex;
    state();
    }, 50);

    $('#inner').on('wheel mousewheel', function(e) {
    e.preventDefault();
    _throttle(e);
    return true;
    });
    })();

    function wrap(id, fn) {
    return function() {
    if (__cancel.id === id) return;
    __cancel.id = id;
    fn();
    };
    }

    function throttle(fn, delay) {
    var hasDebounce, result, self, args, hasCalled;

    function exec() {
    let _hasCalled = hasCalled;
    hasCalled = hasDebounce = false;
    if (_hasCalled) result = fn.apply(self, args);
    }
    return function() {
    if (hasDebounce) {
    self = this;
    args = arguments;
    hasCalled = true;
    return result;
    }
    hasDebounce = true;
    setTimeout(exec, delay);
    return result = fn.apply(this, arguments);
    };
    };

    function noop() {}

    function one(fn) {
    var _cancel = noop;
    var instance = function() {
    _cancel();
    _cancel = fn.apply(this, arguments);
    return cancel;
    };
    var cancel = instance.cnacel = () => _cancel();
    return instance;
    }

    function delay(fn, delay, args, ctx) {
    setTimeout(function() {
    fn && fn.apply(ctx, args || []);
    }, delay);
    return function() {
    fn = null;
    };
    }

    function delayOne(fn, _delay) {
    return one(function() {
    return delay(fn, _delay, arguments, this);
    });
    }
    var _slide = delayOne(throttle(function(event, ui) {
    var selection = $("#indiv").slider("value");
    if (selection > 150) se1();
    if (selection > 100 && selection < 150) se2();
    if (selection > 50 && selection < 100) se3();
    if (selection < 50) se4();
    }, 500), 100);

    $("#indiv").slider({
    orientation: "vertical",
    max: 200,
    animate: "slow",
    value: 175,
    slide: function(event, ui) {
    $body.off('scroll', onScroll);
    timeocanel();
    _stop = true;
    var stop;
    setTimeout(function() {
    if (stop) return;
    _stop = false;
    $body.on('scroll', onScroll);
    }, 1000);
    timeocanel = function() {
    stop = true;
    }
    _slide();
    }
    });

    var _stop = false;
    var timeocanel = noop;

    setInterval(function() {
    $body.off('scroll', onScroll);
    _stop || $body.on('scroll', onScroll);
    }, 1000);

    var $body = $('#body');
    var $inner = $('#inner');
    var onScroll = function() {
    var sc = $body.scrollTop();
    var bh = $body.height();
    var ih = $inner.height();
    if (sc > ih) sc = ih;

    var k = sc / (ih - bh);

    if (k > 1) k = 1;
    var v = 20 + (150 * (1 - k));
    if (k == 1) {
    $('#body').addClass('black_line');
    } else $('#body').removeClass('black_line');
    //console.warn(k);
    _stop || $("#indiv").slider("value", v);
    };
    $body.on('scroll', onScroll);