gpt4 book ai didi

javascript - 滚动快照但在页面上使用 anchor 标记

转载 作者:太空宇宙 更新时间:2023-11-04 13:13:03 25 4
gpt4 key购买 nike

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

我无法使用此链接上提供的插件,因为它们将 div 与 section 类一起使用,但我无法编辑此类 html 元素。

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

如上面的链接演示所示,当(鼠标)滚动开始(向上或向下)时,没有什么可以阻止它……直到它停止。然后又会发生另一个滚动。

由于以下代码,我可以轻松检测到鼠标向上或向下滚动:

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));
});

现在我需要真的滚动到下一个/上一个 anchor (感谢scrollTop)

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

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

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

最佳答案

I cannot use the plugin provided on this link because they use div with section class but I cannot edit this kind of html elements.

为什么不使用 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 有效选择器都将被允许。

I prefer using the id on the anchor tags on the page. So when user starts scrolling up/down I need to detect the previous/next anchor and scroll to it.

我想说使用 id 元素可能会非常困难,因为在您甚至可以控制动画之前,站点将滚动到给定的 ID。这是一项浏览器功能。

关于javascript - 滚动快照但在页面上使用 anchor 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31117935/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com