Question

所以我想用jQuery实现一个完整的页面转换滚动。我知道有插件，但我需要一个自定义代码。

//new script
<script>

  $(document).ready(function(){
    // http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily

    // left: 37, up: 38, right: 39, down: 40,
    // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
    var keys = {37: 1, 38: 1, 39: 1, 40: 1};

    function preventDefault(e) {
      e = e || window.event;
      if (e.preventDefault)
          e.preventDefault();
      e.returnValue = false;
    }

    function preventDefaultForScrollKeys(e) {
        if (keys[e.keyCode]) {
            preventDefault(e);
            return false;
        }
    }

    function disableScroll() {
      if (window.addEventListener) // older FF
          window.addEventListener('DOMMouseScroll', preventDefault, false);
      window.onwheel = preventDefault; // modern standard
      window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
      window.ontouchmove  = preventDefault; // mobile
      document.onkeydown  = preventDefaultForScrollKeys;
    }

    function enableScroll() {
        if (window.removeEventListener)
            window.removeEventListener('DOMMouseScroll', preventDefault, false);
        window.onmousewheel = document.onmousewheel = null;
        window.onwheel = null;
        window.ontouchmove = null;
        document.onkeydown = null;
    }



        /*  $(window).scroll(function(){

        }); */

              var lastScrollTop = 0;
  $(window).scroll(function(event){
     var st = $(this).scrollTop();

     if (st > lastScrollTop){
         // downscroll code
         console.log('down');
         if (($(this).scrollTop() >940) && ($(this).scrollTop() <1000)){
         disableScroll();
          $('html, body').animate({ scrollTop: $(".bg1").offset().top}, 2000);
          enableScroll();
         }

         if ($(this).scrollTop() >1548){
              disableScroll();
           $('html, body').animate({ scrollTop: $(".bg2").offset().top}, 2000);
               enableScroll();
            }
     } else {
        // upscroll code
        console.log('up');
      /*  if ($(this).scrollTop() >1548){
           disableScroll();
        $('html, body').animate({ scrollTop: $(".bg").offset().top}, 2000);
            enableScroll();
         } */
     }
     lastScrollTop = st;
  });


  }); //document.ready

</script>

所以这是我的剧本。它会检查滚动是上升还是下降，然后从指定的像素开始转换。开始发生得非常好。第一次转变正在发生。然而，在那之后，无论我向上还是向下滚动它总是转回到bg1的位置。如果我非常强烈地滚动，有时会滚动到bg2。我的代码有什么问题？

Answer 1

这是一个包含评论的工作代码和我使用的来源。

  //$(document).ready(function(){ //disables all the scrolling
  //  $('body,html').css('overflow', 'hidden');
 //  });
  // http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily
  // left: 37, up: 38, right: 39, down: 40,
  // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
  var keys = {37: 1, 38: 1, 39: 1, 40: 1};

  function preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault)
        e.preventDefault();
    e.returnValue = false;
  }

  function preventDefaultForScrollKeys(e) {
      if (keys[e.keyCode]) {
          preventDefault(e);
          return false;
      }
  }

  function disableScroll() {
    if (window.addEventListener) // older FF
        window.addEventListener('DOMMouseScroll', preventDefault, false);
    window.onwheel = preventDefault; // modern standard
    window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
    window.ontouchmove  = preventDefault; // mobile
    document.onkeydown  = preventDefaultForScrollKeys;
  }

  function enableScroll() {
      if (window.removeEventListener)
          window.removeEventListener('DOMMouseScroll', preventDefault, false);
      window.onmousewheel = document.onmousewheel = null;
      window.onwheel = null;
      window.ontouchmove = null;
      document.onkeydown = null;
  }


//http://stackoverflow.com/questions/33838956/jquery-full-page-scroll-without-plugin

  var currentLocation = 'firstPage';
  // No need to set these inside the event listener since they are always the same.
  var firstHeight = $('#firstPage').offset().top,
      secondHeight = $('#secondPage').offset().top,
      thirdHeight = $('#thirdPage').offset().top,
      fourthHeight = $('#fourthPage').offset().top,
      fifthHeight = $('#fifthPage').offset().top,
      sixthHeight = $('#sixthPage').offset().top,
      seventhHeight = $('#seventhPage').offset().top,
      eightHeight = $('#eightPage').offset().top,
      ninthHeight = $('#ninthPage').offset().top;
  // Helper so we can check if the scroll is triggered by user or by animation.
  var autoScrolling = false;

  $(document).scroll(function(e){
      var scrolled = $(window).scrollTop();

      // Only check if the user scrolled
      if (!autoScrolling) {
        if (scrolled > 1 && currentLocation == 'firstPage') {
              scrollPage(secondHeight, 'secondPage');
          }
          else if (scrolled > secondHeight + 1 && currentLocation == 'secondPage') {
              scrollPage(thirdHeight, 'thirdPage');
          }
          else if (scrolled > thirdHeight + 1 && currentLocation == 'thirdPage') {
              scrollPage(fourthHeight, 'fourthPage');
          }
          else if (scrolled > fourthHeight + 1 && currentLocation == 'fourthPage') {
              scrollPage(fifthHeight, 'fifthPage');
          }
          else if (scrolled > fifthHeight + 1 && currentLocation == 'fifthPage') {
              scrollPage(sixthHeight, 'sixthPage');
          }
          else if (scrolled > sixthHeight + 1 && currentLocation == 'sixthPage') {
              scrollPage(seventhHeight, 'seventhPage');
          }
          else if (scrolled > seventhHeight + 1 && currentLocation == 'seventhPage') {
              scrollPage(eightHeight, 'eightPage');
          }
          else if (scrolled > eightHeight + 1 && currentLocation == 'eightPage') {
              scrollPage(ninthHeight, 'ninthPage');
          }
          else if (scrolled < ninthHeight - 1 && currentLocation == 'ninthPage') {
              scrollPage(eightHeight, 'eightPage');
          }
          else if (scrolled < eightHeight - 1 && currentLocation == 'eightPage') {
              scrollPage(seventhHeight, 'seventhPage');
          }
          else if (scrolled < seventhHeight - 1 && currentLocation == 'seventhPage') {
              scrollPage(sixthHeight, 'sixthPage');
          }
          else if (scrolled < sixthHeight - 1 && currentLocation == 'sixthPage') {
              scrollPage(fifthHeight, 'fifthPage');
          }
          else if (scrolled < fifthHeight - 1 && currentLocation == 'fifthPage') {
              scrollPage(fourthHeight, 'fourthPage');
          }
          else if (scrolled < fourthHeight - 1 && currentLocation == 'fourthPage') {
              scrollPage(thirdHeight, 'thirdPage');
          }
          else if (scrolled < thirdHeight - 1 && currentLocation == 'thirdPage') {
              scrollPage(secondHeight, 'secondPage');
          }
          else if (scrolled < secondHeight - 1 && currentLocation == 'secondPage') {
              scrollPage(firstHeight, 'firstPage');
          }
      }//autoScrolling IF

      // Since they all have the same animation, you can avoid repetition
      function scrollPage(nextHeight, page) {
        currentLocation = page;

        // At this point, the page will start scrolling by the animation
        // So we switch this var so the listener does not trigger all the if/else
        autoScrolling = true;
        disableScroll();
        $('body,html').animate({scrollTop:nextHeight}, 500, function () {
            // Once the animation is over, we can reset the helper.
            // Now it is back to detecting user scroll.
            autoScrolling = false;
            enableScroll();
        });
      }

    //$('h1').html(scrolled);
    //$('h1').append("/" + secondHeight);
    //$('h1').append("/" + thirdHeight);
  })//document.ready

jQuery全页转换滚动

1 个答案: