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

DimonFreeman

Постоялец
Регистрация
25 Авг 2014
Сообщения
92
Реакции
12
Лендинг с 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);
 
Назад
Сверху