垂直滑块滚动

时间:2017-12-02 12:32:28

标签: javascript html

我在使用http://jsfiddle.net/NGj7F/复制的代码时遇到问题我将此代码放在我的HTML文件之间,并且我已将每个部分放在

之间
//Set each section's height equals to the window height
$('section').height($(window).height());
/*set the class 'active' to the first element 
 this will serve as our indicator*/
$('section').first().addClass('active');

/* handle the mousewheel event together with 
 DOMMouseScroll to work on cross browser */
$(document).on('mousewheel DOMMouseScroll', function (e) {
  e.preventDefault();//prevent the default mousewheel scrolling
  var active = $('section.active');
  //get the delta to determine the mousewheel scrol UP and DOWN
  var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;

  //if the delta value is negative, the user is scrolling down
  if (delta < 0) {
    //mousewheel down handler
    next = active.next();
    //check if the next section exist and animate the anchoring
    if (next.length) {
      /*setTimeout is here to prevent the scrolling animation
       to jump to the topmost or bottom when 
       the user scrolled very fast.*/
      var timer = setTimeout(function () {
        /* animate the scrollTop by passing 
        the elements offset top value */
        $('body, html').animate({
          scrollTop: next.offset().top
        }, 'slow');

        // move the indicator 'active' class
        next.addClass('active')
          .siblings().removeClass('active');

        clearTimeout(timer);
      }, 800);
    }

  } else {
    //mousewheel up handler
    /*similar logic to the mousewheel down handler 
    except that we are animate the anchoring 
    to the previous sibling element*/
    prev = active.prev();

    if (prev.length) {
      var timer = setTimeout(function () {
        $('body, html').animate({
          scrollTop: prev.offset().top
        }, 'slow');

        prev.addClass('active')
          .siblings().removeClass('active');

        clearTimeout(timer);
      }, 800);
    }

  }
});

它在我的网站上按照我想要的方式工作,但每次我到达最后一节并再次向下滚动,之后它就不再起作用了。当我尝试从第一部分向上滚动时也会发生同样的情况。它为什么停止工作?请帮忙!!!并且有人可以帮助我向这个函数引入向上和向下箭头吗?感谢!!!!!

0 个答案:

没有答案