一页可滚动 |插件没有帮助，不希望内容滑动

Question

我想将我的网页更改为一页可滚动。

我正在努力实现这样的目标：http://fleurmoreau.fr/

当用户 "scrolls" 内容发生变化。我以为我可以使用 onepage-scroll 插件 (https://github.com/peachananr/onepage-scroll) 做到这一点，但并没有真正成功。

进一步说明：

1) 我希望 menu 和其他一些元素是 "fixed" (see the example)。我可以使用 onepage-scroll 插件来做到这一点（你只需要将 div 与 class "main" 和正确的部分放在一起）。我离我想做的事又近了一步，但这并不是我想要的。

2) 我想只更改内容，而不是像插件那样向上或向下滑动。

基本上，我想在用户滚动时触发动画（块显示效果等，link 以上）。我正在考虑使网页可滚动一页，然后当用户滚动时，只需将其重定向到包含 html、css 和 js 文件的新文件夹（菜单和其他内容保持不变，我想要的内容在这个新文件夹中更改是不同的）。也许这是解决我的问题的一种可能方法？

我见过几次（http://fleurmoreau.fr/ 不是唯一的，这只是一个例子）所以我想知道如何做到这一点。有人愿意与我分享解决方案吗？

祝你有愉快的一天！

编辑：鼠标滚轮事件侦听器正是我要找的。谢谢

Answer 1

要事第一。您引用的网站未使用任何滚动事件。在 Chrome 中打开站点并打开开发者工具。然后将视图设置为移动设备（或平板电脑，同样的东西）。如果您在 Chrome 处于移动模式，您的鼠标就像手指在真正的智能手机上一样。按照这个逻辑，你用鼠标在屏幕上的 'swiping' 应该触发滚动事件，但事实并非如此。因此，触发精美动画的并不是真正的滚动。

我相信 Fleur Moreau 使用 'mousewheel' 事件侦听器来触发动画。

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!')

});

祝你项目顺利

一页可滚动 |插件没有帮助，不希望内容滑动

One page scrollable | Plugin not helpful, don't want content to slide

html

javascript

css

plugins

scrollable