#javascript #jquery #scroll #веб_дизайн
Как сделать чтобы при скролле прокрутка страницы происходила ровно на высоту блоков,
которые в ней находятся (код внутри)?
Не хочу использовать библиотеки, потому что, наверняка, нужно дописать 2-5 строк
кода, чтобы решить вопрос с прокруткой страницы при скролле на высоту блока (на заданное
количество пикселей).
И второй вопрос, как сделать эту прокрутку плавной, чтобы не было ощущения, что просто
переключили блок с одного на другой.
function slide() {
h = document.documentElement.clientHeight
$(".one, .two, .three").css('height', h);
};
$(window).resize(slide);
$(document).ready(slide);
.one,
.two,
.two {
display: block;
position: relative;
width: 100%;
}
.one {
background: #CD5;
}
.two {
background: aquamarine;
}
.three {
background: #2196F3;
}
Ответы
Ответ 1
Эврика! function slide() { h = document.documentElement.clientHeight $(".one, .two, .three").css('height', h); }; $(window).resize(slide); $(document).ready(slide); $(document).bind('mousewheel DOMMouseScroll', function(event) { scroll(event); }); var num = 1; var scrolling = false; function scroll(event) { event.preventDefault(); if (!scrolling) { scrolling = true; if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { num--; num = num < 1 ? 1 : num; } else { num++; num = num > 3 ? 3 : num; } $('html, body').animate({ scrollTop: $(".num" + num).offset().top }, 500, "linear", function() { scrolling = false; }); } } .one, .two, .two { display: block; position: relative; width: 100%; } .one { background: #CD5; } .two { background: aquamarine; } .three { background: #2196F3; }
