Question

我正在尝试创建类似于此http://www.thepetedesign.com/demos/onepage_scroll_demo.html的类似单页滚动效果，但无需使用插件。

我的代码是检查可用的div（部分）并在滚动时递增1，然后将其淡入，重定向到它（window.location =＃s1）或动画滚动到它。问题是滚动是敏感的和连续的，一个滚动的鼠标，并从这个例子1到5。将动画滚动到div时，它还会触发事件侦听器。

是否可以在第一次滚动后暂停滚动事件监听器，显示div然后取消暂停监听器？

<div id="sections">
    <div id="s1">section 1</div>    
    <div id="s2">section 2</div>    
    <div id="s3">section 3</div>    
    <div id="s4">section 4</div>    
    <div id="s5">section 5</div>
</div>

#sections div {
    min-height: 1000px;
}

var tempScrollTop= 0; 
var currentSection = 0;
var maxSections = $("#sections div").size() - 1;

$(window).scroll(function() { 
    currentScrollTop = $("body").scrollTop(); 

    if (tempScrollTop > currentScrollTop ) {
    // scroll up
    } else if (tempScrollTop < currentScrollTop) {
    // scroll down

        if (currentSection <= maxSections) { 
            currentSection++;
        }

        $('#sections div').hide();
        $("#s"+currentSection).fadeIn('slow');
    }

    tempScrollTop = currentScrollTop; 
});

http://jsfiddle.net/0qqdq9ab/2/

Answer 1

考虑到您将div设为myDiv0，myDiv1 ...，您可以捕获箭头键事件并滚动到div

var currCount = 0;
var totalDivs = $('div[id^="myDiv"]').length;
$(document).keydown(function(e) {
switch(e.which) {
    case 37: // left
    break;

    case 38: // up
    $('html, body').animate({
        scrollTop: $("#myDiv" + (--currCount)%totalDivs).offset().top
    }, 1000);
    break;

    case 39: // right
    break;

    case 40: // down
    $('html, body').animate({
        scrollTop: $("#myDiv" + (++currCount)%totalDivs).offset().top
    }, 1000);
    break;

    default: return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)

}）;

Answer 2

尝试调整html以使id元素开始以0结尾，将scroll事件处理程序定义为命名函数，将.one()替换为{{1} setTimeout（）.on() , using scroll`事件监听器

＆＃13;

to create minimal delay before re-attaching

＆＃13;

var tempScrollTop = 0;
var currentScrollTop = 0;
var currentSection = 0;
var maxSections = $("#sections div").length;

function scroller() {

  var fx = function(setSection) {

    currentSection = !!setSection 
                     ? --currentSection % maxSections 
                     : ++currentSection % maxSections;
    
    if (currentSection > -1) {
      $("#sections div").hide()
        .filter("#s" + currentSection)
        .fadeIn("slow", function() {
          setTimeout(function() {
            tempScrollTop = $(this).scrollTop();
            $(this).one("scroll", scroller)
          })
        });
      // if scroll up to first `#s0`
    } else {
      currentSection = 0;
      tempScrollTop = $(this).scrollTop();
      $(this).one("scroll", scroller)
    }
  }
  currentScrollTop = $(this).scrollTop();
  if (currentScrollTop > tempScrollTop && currentSection < maxSections - 1) {

    fx.call(this)
  } else {
    if (currentSection < maxSections && currentScrollTop < tempScrollTop) {
      fx.call(this, true)
    } else {
      $(this).on("scroll.temp", function() {
        if ($(this).scrollTop() < tempScrollTop) {
          $(this).off("scroll.temp");
          currentScrollTop = tempScrollTop = $(this).scrollTop();
          fx.call(this, true)
        }
      })
    }
  }
}

$(window).one("scroll", scroller);

＆＃13;

#sections div {
  min-height: 1000px;
}
#s0 {
  background: gold;
}
#s1 {
  background: green;
}
#s2 {
  background: brown;
}
#s3 {
  background: blue;
}
#s4 {
  background: red;
}

＆＃13;

jsfiddle http://jsfiddle.net/0qqdq9ab/5/

滚动显示div

2 个答案: