Как лучше данную штуку реализовать?

Question

[Aleksandr]

Есть блок

Но не все так просто. Слайды также должны прокручиваться скроллом, когда блок появляется в области видимости.
Пример https://jsfiddle.net/r96r1c5j/

Теперь вопрос. Я не могу понять, как мне ограничить работу лишь размером этого блока. То есть он должен быть 657px.

Answer 1

[Александр]

Перехватывай scroll на блоке и используй его для смены слайдов или возьми какой-то готовый слайдер если не хочешь заморачиваться, что-то типа такого .

Comments

[Aleksandr]

в том то и дело, что у меня блок во всю ширину. То есть иначе при попадании скролла на блок, нельзя страницу прокрутить

[Александр]

ну так когда пользователь пролистает слайдер до последнего слада пускай его вниз а если на первом то вверх, я так понимаю что этого и нужно достичь.
https://github.com/jquery/jquery-mousewheel этот скрипт обрабатывает скролл колесом мыши.
можешь и на jQuery событие scroll использовать.

[Aleksandr]

Александр: именно этого) но не могу допереть как)

[Александр]

С этого и надо было начинать)
вот тебе набросок, там где я вывожу сообщения в консоль влепи проверку на активность первого и последнего слайда ну все что тебе нужно.
var elem = document.getElementById('container');

if (elem.addEventListener) {
if ('onwheel' in document) {
// IE9+, FF17+, Ch31+
elem.addEventListener("wheel", onWheel);
} else if ('onmousewheel' in document) {
// устаревший вариант события
elem.addEventListener("mousewheel", onWheel);
} else {
// Firefox < 17
elem.addEventListener("MozMousePixelScroll", onWheel);
}
} else { // IE8-
elem.attachEvent("onmousewheel", onWheel);
}

function onWheel(e) {
e = e || window.event;

var delta = e.deltaY || e.detail || e.wheelDelta;

var info = document.getElementById('delta');
//console.log(delta);
if (delta > 0 ){
console.log('крутим вниз');
} else {
console.log('крутим вверх');
}

e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}

[Aleksandr]

Александр: супер) проверку на активный слайд я сделал, а не подскажите как мне теперь восстановить этот самый скролл?

[Александр]

e.preventDefault ? e.preventDefault() : (e.returnValue = false);
эту строку исключи, и будет счастье.

[Aleksandr]

Александр: Не помогло :)

[Александр]

можно линк на то что получилось?

[Aleksandr]

Александр: codepen.io/anon/pen/QNmQEe

[Александр]

коль уже используешь слайдер я бы подправил с самом сприпте слайдера а не дописывал на странице, но как вариант можно и так.

$(document).ready(function() {
$('#slider').rhinoslider({
effect: 'none',
controlsPlayPause: false,
cycled: false,
showBullets: 'always',
showControls: 'always'
});
});
var elem = document.getElementById('sliders');

if (elem.addEventListener) {
if ('onwheel' in document) {
// IE9+, FF17+, Ch31+
elem.addEventListener("wheel", onWheel);
} else if ('onmousewheel' in document) {
// устаревший вариант события
elem.addEventListener("mousewheel", onWheel);
} else {
// Firefox < 17
elem.addEventListener("MozMousePixelScroll", onWheel);
}
} else { // IE8-
elem.attachEvent("onmousewheel", onWheel);
}

function onWheel(e) {
e = e || window.event;

var delta = e.deltaY || e.detail || e.wheelDelta;

var info = document.getElementById('delta');
//console.log(delta);
if (delta > 0 ){
if ($('#slider li:last-child').hasClass('rhino-active')) {
console.log('последний');
var top = $("#slider").offset().top + 600;
$('html, body').stop().animate({
scrollTop: top
}, 1000);
}
} else {
if ($('#slider li:first-child').hasClass('rhino-active')) {
console.log('первый');
var top = $("#slider").offset().top - 300;
$('html, body').stop().animate({
scrollTop: top
}, 1000);
}
}
}

[Aleksandr]

Александр: Интересно, спасибо.