JQuery: прокрутите до следующего div колесиком мыши после достижения конца текущего div

Я пытаюсь создать сайт из div, которые действуют как страницы. Таким образом, есть несколько div с минимальной высотой 100% окна браузера друг над другом. Я пытаюсь заставить работать навигацию, чтобы пользователь мог прокручивать следующий div с помощью колесика мыши. Я нашел этот полезный фрагмент кода:

http://jsfiddle.net/Mottie/Vk7gB/

$('#nav').onePageNav();



var $current, flag = false;

$('body').mousewheel(function(event, delta) {
    if (flag) { return false; }
    $current = $('div.current');

    if (delta > 0) {
        $prev = $current.prev();

        if ($prev.length) {
            flag = true;
            $('body').scrollTo($prev, 1000, {
                onAfter : function(){
                    flag = false;
                }
            });
            $current.removeClass('current');
            $prev.addClass('current');
        }
    } else {
        $next = $current.next();

        if ($next.length) {
            flag = true;
            $('body').scrollTo($next, 1000, {
                onAfter : function(){
                    flag = false;
                }
            });
            $current.removeClass('current');
            $next.addClass('current');
        }
    }

    event.preventDefault();
});

Но вы можете видеть, что есть проблема, когда содержимое длиннее окна браузера. Я хотел бы, чтобы это работало так, чтобы, если текущий div длиннее, чем прокрутка окна браузера, работала нормально, но она должна останавливаться в нижней части div, а затем в следующий раз прокручиваться до следующего div. Есть ли способ сделать это?

Я надеюсь, что это имеет какой-то смысл..

Спасибо,

-Микко


jquery mousewheel scrollto
person Mikkå    schedule 07.04.2013    source источник
comment
Просто комментарий, я бы счел это невероятно раздражающим как пользователя. Никогда не взламывайте элементы управления пользователей, чтобы заставить их вести себя так, как они не должны, на мой взгляд.   -  person Rick Calder    schedule 07.04.2013
comment
Обычно я с вами соглашаюсь, но на этот раз вся концепция будет немного отличаться от обычного веб-сайта. Я хотел бы иметь больше контроля над пользовательским интерфейсом. Но все равно спасибо.   -  person Mikkå    schedule 07.04.2013

Ответы (2)


arrow_upward
0
arrow_downward

http://jsfiddle.net/Vk7gB/261/

Не законченное решение, но оно поставит вас на правильный путь.

$('#nav').onePageNav();

var $current, flag = false, b = $('body');

b.mousewheel(function(event, delta) {
if (flag) { return false; }
$current = $('div.current');

var $next;
if (delta > 0) $next = $current.prev();
else $next = $current.next();

var scrollTop = b.scrollTop();
var elHeight = $current.height();
var nextOffset = $next.offset().top;
var avHeight = screen.availHeight;

console.log(scrollTop, nextOffset, elHeight, avHeight);
if(scrollTop + elHeight - avHeight < nextOffset){
    return true;
}

if ($next.length) {
    flag = true;
    $next.scrollTop();        
    $('body').scrollTo($next, 1000, {
        onAfter : function(){
            flag = false;
        }
    });
    $current.removeClass('current');
    $next.addClass('current');
}

event.preventDefault();
return false;
});
person rafaelcastrocouto    schedule 02.12.2013

arrow_upward
0
arrow_downward

в этой статье вы можете найти похожее решение, которое я предпочитаю использовать вместо вашей идеи

вы можете определить разделы, и я предлагаю вам, если это возможно, сделать ваши страницы автоматически подходящими для браузера

это библиотека github js, которую вы можете использовать

это онлайн-демонстрация, понятная и понятная для вас.

person saber tabatabaee yazdi    schedule 02.10.2016