Mouswheel с одной страницей navi - прокрутка только в конце раздела

У меня был скрипт onepageNav для прокрутки страниц. Страницы это не полная высота окна, чем у меня была проблема с добавлением mousewhell.Mouswheel с одной страницей navi - прокрутка только в конце раздела

Я имел код:

  $('body').mousewheel(function(event, delta) { 
      if (flag) { return false; } 
      $current = $('section.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(); 
     });

Пришло скрипт для колесика мыши. Это работа, но не то, что я хочу. Если у меня была секция №2 больше окна, чем автоматическая, прокрутите ее до следующего раздела. У меня был раздел № 3, последний, большой, чем окна, и я прокручиваю вниз, чем прокрутка, переставая работать.

У кого-то была идея, как это решить?

источник

2013-12-20 Dominik Traskowski

Трудно сказать что-то не демо, но очевидно, что вы нигде не проверяете высоту раздела. Я думаю, вы должны сравнить высоту контейнера и высоту раздела, а если высота раздела больше высоты контейнера, то не для предотвращения детонации прокрутки. – Tony

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

Опубликуйте свой HTML-код, и мы сможем вам помочь. –

Если я вас правильно понял вы можете использовать следующий код:

HTML:

<section id='s1'></section> 
<section id='s2'></section> 
<section id='s3'></section> 
<section id='s4'></section>

JS:

function elementInViewport2(el) { 
    var top = el.offsetTop; 
    var left = el.offsetLeft; 
    var width = el.offsetWidth; 
    var height = el.offsetHeight; 

    while(el.offsetParent) { 
    el = el.offsetParent; 
    top += el.offsetTop; 
    left += el.offsetLeft; 
    } 

    return (
    top < (window.pageYOffset + window.innerHeight) && 
    left < (window.pageXOffset + window.innerWidth) && 
    (top + height) > window.pageYOffset && 
    (left + width) > window.pageXOffset 
); 
}; 

var current = $('section').first(); 
current.addClass('current'); 
var flag; 

$(window).scroll(function(event, delta) { 
    if (flag) { return false; } 

    var $body = $('body'), 
     $window = $(window), 
     newScroll = $body.scrollTop(); 

    if (!elementInViewport2(current[0])) { 
     current.removeClass('current'); 
     current[0] = null; 
    } 

    var newSection = $('section:not(.current)').filter(function(i, el) { 
     return elementInViewport2(el); 
    }).first(); 

    if (newSection[0] && current[0] != newSection[0]) { 
     current.removeClass('current'); 
     current = newSection; 
     newSection.addClass('current'); 
     flag = true; 
     $body.animate({scrollTop: newSection.offset().top}, function() { 
      flag = false; 
     }); 

     event.preventDefault(); 
    } 
});

Demo

источник

2013-12-20 03:03:10 Tony

Mouswheel с одной страницей navi - прокрутка только в конце раздела

ответ

Смежные вопросы