Прокрутка разделов прокручивается случайным образом

Мне нужно закодировать веб-сайт с помощью разделов прокрутки одной страницы, не используя плагин (например, fullPage.js). Так что я только что создал 6 разделов, как: Прокрутка разделов прокручивается случайным образом

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="hlpjs.js" type="text/javascript"></script> 
<title>My Website</title> 
<link href="hlpcss.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
    <section id="section1"> 
     <h1>text1</h1> 
    </section> 
    <section id="section2"> 
     <h1>text2</h1> 
    </section> 
    <section id="section3"> 
     <h1>text3</h1> 
    </section> 
    <section id="section4"> 
     <h1>text4</h1> 
    </section> 
    <section id="section5"> 
     <h1>text5</h1> 
    </section> 
    <section id="section6"> 
     <h1>text6</h1> 
    </section> 
</body>

и я попытался пролистать разделы в яваскрипте документа, как это:

var count = 1; 
$(window).bind('mousewheel DOMMouseScroll', function(event){ 
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { 
     if (count < 6) { 
      count++; 
      $('html, body').animate({ 

        scrollTop: $("#section"+count).offset().top 
      }, 2000); 
     } 
    } else { 
     if(count>1){ 
      count--; 
      $('html, body').animate({ 
        scrollTop: $("#section"+count).offset().top 
      }, 2000); 
     } 
    } 
});

но не работает, как это должно быть. Это просто прокрутка случайным образом, пока она не находится наверху (или внизу), а затем она останавливается.

источник

2016-03-30 Ahmet Erbil

Вероятно потому, что вы стрелять много анимации друг на друга. Попробуйте использовать флаг, чтобы разрешить анимацию только тогда, когда анимация не происходит. Вы можете сделать это, используя «полный» ответ на $ .animate. Документы: http://api.jquery.com/animate/. Кроме того, ваши счетчики на самом деле не имеют смысла. – caulitomaz

Не уверен, чего вы пытаетесь достичь, но вот скрипка просто пытается отладить ваш код https://jsfiddle.net/46d0Lnfo/3/ Это может дать вам ясность. Ваша логика счета неверна – Ashish451

@caulitomaz Я хочу прокрутить либо один раздел вниз, либо один раздел вверх, поэтому я использую счет для доступа к правильному идентификатору предыдущего или следующего раздела. Что в этом плохого? –

Я удалил операторы if и добавил полный обратный вызов, так что теперь он работает. Моя единственная проблема в том, что я могу бесконечно прокручивать вверх и вниз, но если я попытаюсь добавить какое-либо утверждение if, анимации вообще не работают (Любые предложения?). В противном случае я буду идти с этим:

var count = 1; 
 
$(window).bind('mousewheel DOMMouseScroll', function(event){ 
 
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { 
 
\t \t count--; 
 
     $('html, body').animate({ 
 
        scrollTop: $("#section"+count).offset().top 
 
       }, 1000,function(){ 
 
     $('html, body').clearQueue(); 
 
\t \t \t \t }); 
 
    } 
 
    else { 
 
\t \t count++; 
 
     $('html, body').animate({ 
 
        scrollTop: $("#section"+count).offset().top 
 
       }, 1000,function(){ 
 
     $('html, body').clearQueue(); 
 
\t \t \t \t }); 
 
\t } 
 
});

источник

2016-03-31 19:23:01

Прокрутка разделов прокручивается случайным образом

ответ

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