jQuery“捕捉”效果

我对我要建立的网站有特定的效果。正如您在this website中看到的，我希望屏幕在用户滚动后“捕捉到”下一部分，但在滚动事件触发后的（不是瞬间）之后只有。我不想使用像panelSnap这样的插件的原因是因为我
1：想要较小的代码和
2.希望网站在移动设备上查看时具有更多“即时捕捉”效果（尝试减少上面提到的网站中的浏览器大小）。我知道我理论上可以尝试结合使用两个插件（如panelsnap和scrollify），并在浏览器为特定宽度时适当地激活它们，但我不知道我是否想要这样做...... :(

因此所有这一切说，这里是代码：jQuery“捕捉”效果

来源

2017-06-12 Caleb Bertrand

当snap中的滚动动画正在进行时，可以使用布尔值来记录并防止您的$(window).scroll()事件处理程序执行任何操作。

这里有一个工作示例：

var scrollTimeout = null; 
var currentElem = 0; 
var options = { 
    scrollSpeed: 1100, 
    selector: 'div.panels', 
    scrollDelay: 500, 
}; 
$(document).ready(function() { 
    var scrollInProgress = false; 
    var $snapElems = $(options.selector); 
    console.log($($snapElems[currentElem]).offset().top); 
    function snap() { 
     if ($('html, body').scrollTop() >= $($snapElems[currentElem]).offset().top) { 
      if (currentElem < $snapElems.length-1) { 
       currentElem++; 
      } 
     }else{ 
      if (currentElem > 0) { 
       currentElem = currentElem - 1; 
      } 
     } 

     scrollInProgress = true; 
     $('html, body').animate({ 
      scrollTop: $($snapElems[currentElem]).offset().top 
     }, options.scrollSpeed, 'swing', function() { 
      // this function is invoked when the scroll animate is complete 
      scrollInProgress = false; 

     }); 
    } 
    $(window).scroll(function() { 
     if (scrollInProgress == false) { 
      if ($(window).innerWidth() > 766) { 
       if (scrollTimeout) {clearTimeout(scrollTimeout);} 
       scrollTimeout = setTimeout(function(){snap()}, options.scrollDelay); 
      }else{ 
       //I'll deal with this later 
      } 
     } 
    }); 
});

变量scrollInProgress设置为false默认。当滚动animate开始时，它被设置为true。当animate完成时，scrollInProgress被设置为false。您的$(window).scroll()事件处理程序顶部的简单if语句可防止处理程序在滚动正在进行时采取任何操作。

来源

2017-06-22 17:13:30

你有没有考虑过使用众所周知的fullPage.js库？看看这个normal scroll的例子。快照超时可通过选项fitToSectionDelay进行配置。没有什么可以担心的大小...它是7Kb Gzipped！

我知道我在理论上可以尝试合并两个插件，像panelsnap和scrollify，并激活它们适当的时候，浏览器是一定的宽度，但我不知道如果我想这样做

fullPage.js还提供responsiveWidth和responsiveHeight选项可在特定尺寸下将其关闭。

来源

2017-06-22 16:09:38 Alvaro

jQuery“捕捉”效果

回答

相关问题