drserg
@drserg

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

Здравствуйте. Есть длинная страница (главная), и наблюдается неудобство при чтении данной страницы. Страница сверстана по секциям, потому решил, что будет удобно с помощью колесика перепрыгивать с секции до секции. Нашел в гугле, и немного модифицировал под себя такой скрипт:
$(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, который растягивает все секции под экран пользователя)
  • Вопрос задан
  • 4450 просмотров
Решения вопроса 1
Liatano
@Liatano
Например,можно запретить выполнение Вашего скрипта,пока нижний край экрана не достигнет конца слайда(или 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;
	}
});//
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы