MouseWheel ScrollTo, или как с помощью колесика мыши перепрыгивать на нужный анкор?

Question

[Сергей]

Здравствуйте. Есть длинная страница (главная), и наблюдается неудобство при чтении данной страницы. Страница сверстана по секциям, потому решил, что будет удобно с помощью колесика перепрыгивать с секции до секции. Нашел в гугле, и немного модифицировал под себя такой скрипт:

$(function(){
    (function() {
        var delay = false;

        $(document).on('mousewheel DOMMouseScroll', function(event) {
            event.preventDefault();
            if(delay) return;

            delay = true;
            setTimeout(function(){delay = false},200)

            var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

            var a= document.getElementsByClassName('scrollAnchor');
            if(wd < 0) {
                for(var i = 0 ; i < a.length ; i++) {
                    var t = a[i].getClientRects()[0].top;
                    if(t >= 40) break;
                }
            }
            else {
                for(var i = a.length-1 ; i >= 0 ; i--) {
                    var t = a[i].getClientRects()[0].top;
                    if(t < -20) break;
                }
            }
            $('html,body').animate({
                scrollTop: a[i].offsetTop
            });
        });
    })();
});

Все работает как задумывалось. Но, не везде. К примеру на ноутбуках не все секции идеально подходят по высоте экрана, и почти половину секции пользователь пропускает, так как при прокрутки мыши перепрыгивает на сл. секцию. Как реализовать сл.: пока сл. блок не появился внизу экрана, не перепрыгивать на сл. секцию? Т.е. так называемый overflow-scroll="true"? Или может есть уже готовые варианты? (не full-page-scroll, который растягивает все секции под экран пользователя)

Answer 1

[Ольга]

Например,можно запретить выполнение Вашего скрипта,пока нижний край экрана не достигнет конца слайда(или offset().Top следующего),т.е.

function getWinHeight(){//получаем высоту экрана
	if($(window).height()<document.body.clientHeight) winHeight=$(window).height();
	else winHeight=document.body.clientHeight;
}
getWinHeight();
window.onresize = function(){/*ON RESIZE*/
	getWinHeight()
}
var curElemID=0;
var scrollTop=0;
$(document).on('mousewheel DOMMouseScroll', function(event) {
	var scroll=$(window).scrollTop();
	var delta=((scrollTop-scroll)>0)?true:false;
	scrollTop=scroll;
	if(((winHeight+scrollTop) > a[curElemID+1].offsetTop) && delta){
		//движемся вниз,не достигли конца слайда
		return;
	}else{
			event.preventDefault();
			if(delay) return;

			/*--/ваш код/---*/
			
			$('html,body').animate({
				scrollTop: a[i].offsetTop
			});
			curElemID=i;
	}
});//

Comments

[Сергей]

Спасибо за ответ, но не много не понял как он должен выглядеть вцелом.

[Сергей]

в итоге у меня получился такой код
$(function(){
(function() {
var delay = false;

$(document).on('mousewheel DOMMouseScroll', function(event) {
function getWinHeight(){//получаем высоту экрана
if($(window).height()){return true} else {return false}
scrollTop=scroll;
if(((winHeight+scrollTop) > a[curElemID+1].offsetTop) && delta){
//движемся вниз,не достигли конца слайда
return;
} else {

event.preventDefault();
if(delay) return;

delay = true;
setTimeout(function(){delay = false},200)

var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

var a= document.getElementsByClassName('scrollAnchor');
if(wd < 0) {
for(var i = 0 ; i < a.length ; i++) {
var t = a[i].getClientRects()[0].top;
if(t >= 40) break;
}
}
else {
for(var i = a.length-1 ; i >= 0 ; i--) {
var t = a[i].getClientRects()[0].top;
if(t < -20) break;
}
}
$('html,body').animate({
scrollTop: a[i].offsetTop
});
curElemID=i;
}}
});
})();
});
но не сработало

[Сергей]

Почему-то не вышло:
$(function(){
(function() {
var delay = false;
function getWinHeight(){//получаем высоту экрана
if($(window).height()0)?true:false;
scrollTop=scroll;
if(((winHeight+scrollTop) > a[curElemID+1].offsetTop) && delta){
//движемся вниз,не достигли конца слайда
return;
}else{
event.preventDefault();
if(delay) return;

delay = true;
setTimeout(function(){delay = false},200)

var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

if(wd < 0) {
for(var i = 0 ; i < a.length ; i++) {
var t = a[i].getClientRects()[0].top;
if(t >= 40) break;
}
}
else {
for(var i = a.length-1 ; i >= 0 ; i--) {
var t = a[i].getClientRects()[0].top;
if(t < -20) break;
}
}

$('html,body').animate({
scrollTop: a[i].offsetTop
});
curElemID=i;
}
});//

[Ольга]

Тостер жует символы кода,если он не оформлен
высота экрана вычисляется отдельно от скролла ( getWinHeight() ),т.к. нет смысла пересчитывать ее пока мы не изменим размер экрана(поворот планшета)
Далее мы создаем переменные отвечающие за номер текущего слайда и предыдущее состояние скролла( к сожалению не очень сильна в функциях чистого JS,по-этому вычисляю направление движения таким образом)
В обработчике нужно выявить направление движения(delta) и наше местоположение.если не достигли края слайда - скрипт для перемотки опускается,выходим из функции

[Ольга]

Конец слайда определяется началом следующего (curElemID+1)