单页滚动插件:不希望内容滑行

Question

我想将我的网站更改为一个页面可滚动。我正在努力实现像这这样的目标。当用户“滚动”内容时，内容会发生变化。我以为我可以用单页滚动插件来做这件事，但没有成功。

进一步解释：

1. --我希望菜单和其他元素都是“固定的” (视觉解释)。
2. 我只想改变内容，而不是像插件那样上下滑动。

总之，我想触发动画(块显示效果等)。当用户滚动。我想让一个网站一页滚动，当一个用户卷动，只是重定向到一个新的文件夹与HTML/CSS/JS文件(菜单保持不变，内容变化)。也许这是解决我问题的一种可能的办法？

有人愿意和我分享解决方案吗？

Answer 1

首先要做的是。您所引用的站点没有使用任何滚动事件。在Chrome中打开站点并打开开发工具。然后将视图设置为mobile (或tablet，相同的内容)。如果你在Chrome上使用移动模式，那么你的鼠标就像一只真正的智能手机上的手指。根据这种逻辑，你用鼠标在屏幕上的“滑动”应该会触发滚动事件，但它不会触发，因此，触发花哨动画的并不是实际的滚动。

我相信弗勒·莫罗使用了一个“鼠标轮”事件侦听器来触发动画。

var link = document.querySelector('body');
link.addEventListener('mousewheel', function (event) {

    // Prevent the link from updating the URL
    event.preventDefault();

    // Do something...
    console.log('Triggering fancy animations!')

}, false);

或者如果您使用jquery

 $('body').on('mousewheel',function(event){

    // Prevent the link from updating the URL
    event.preventDefault();

    // Do something...
    console.log('Triggering fancy animations!')

});

祝你的项目顺利