滚动捕捉但在页面上使用锚标签答案

【问题标题】：Scroll snap but using anchor tags on the page滚动捕捉但在页面上使用锚标签
【发布时间】：2015-06-29 14:12:08
【问题描述】：

我尝试将 scroll snap 设置到位。我试图达到的目标可以在这里看到：http://alvarotrigo.com/fullPage。所以当用户开始滚动时，它会立即被拦截并滚动页面直到下一个部分。

我无法使用此链接上提供的插件，因为他们使用带有 section 类的 div，但我无法编辑此类 html 元素。

我更喜欢在页面的锚标记上使用id。因此，当用户开始向上/向下滚动时，我需要检测上一个/下一个锚点并滚动到它。

如上面的链接演示所示，当（鼠标）滚动开始（向上或向下）时，没有什么可以阻止它......直到它停止。然后再次滚动可以发生。

借助以下代码，我可以轻松检测鼠标向上或向下滚动：

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
       console.log('down');
   } else {
      // upscroll code
      console.log('up');
   }
   lastScrollTop = st;
});

我还可以像这样检测滚动是否正在进行：

$(window).scroll(function(event){
   clearTimeout($.data(this, 'scrollTimer'));
   $.data(this, 'scrollTimer', setTimeout(function() {
    // do something
    console.log("Haven't scrolled in 250ms!");
   }, 250));
});

现在我需要真的滚动到下一个/上一个锚点（感谢scrollTop）

我的 jsFiddle：http://jsfiddle.net/f38fmsw9/1/

向上/向下/停止滚动时打开控制台并检查消息。

非常感谢您为我指明了正确的方向。

【问题讨论】：

标签： javascript jquery html fullpage.js

【解决方案1】：

我无法使用此链接上提供的插件，因为他们使用 div 使用部分类，但我无法编辑这种 html 元素。

为什么不使用 fullpage.js 选项 sectionSelector 来更改它并使用任何其他选择器？

$('#fullpage').fullpage({
    sectionSelector: '.mySelector'
});

然后在 HTML 中

<div id="fullpage">
    <div class="mySelector">Section 1</div>
    <div class="mySelector">Section 2</div>
    <div class="mySelector">Section 3</div>
</div>

如果您没有所有部分的通用类，您甚至可以使用以下内容：

sectionSelector: '#fullpage>div'

将允许任何 jQuery 有效选择器。

我更喜欢在页面上的锚标签上使用 id。所以当用户开始向上/向下滚动我需要检测上一个/下一个锚点和滚动到它。

我会说使用id 元素可能会非常困难，因为网站会在您控制动画之前滚动到给定的 ID。这是一个浏览器功能。

【讨论】：