在滚动时，触发事件同时隐藏滚动条和隐藏溢出 [英] on scroll, trigger event at the same time while hiding scroll bar and hiding overflow

问题描述

我想创建一个类似于此 http://www.grannyssecret.com 的网站着陆页）。

I'm trying to make a website similar to this http://www.grannyssecret.com (just the landing page).

如果您去那里并向上滚动，隐藏的页脚顺利地显示，然后如果您再次向下滚动，页脚就会消失。

if you go there and scroll up, hidden footer appears smoothly, then if you scroll down again the footer goes down.

我的HTML文件可以模仿同样的事情，当我点击按钮，但它不工作，当我试图通过滚动鼠标滚轮动画页脚。

my HTML file can imitate the same thing when I click the button, but it doesn't work when I try to animate footer by scrolling a mouse wheel.

问题是滚动事件被触发多次。
也，当溢出设置为隐藏滚动事件不会触发。

the problem is that scrolling event is firing multiple times. also, when overflow is set to hidden scrolling event doesn't fire.

任何想法都可以解决这个问题吗？

Any idea to work my way around this problem?

我似乎不能在 jsfiddle https://jsfiddle.net/vd6qgLL2/3/

推荐答案

尝试使用wheel而不是滚动。

document.getElementsByTagName("body")[0].addEventListener("wheel",  function () {
//your code here
});

请找到您的重构小提琴： https://jsfiddle.net/mp0a6Ln6/

Please find your refactored fiddle: https://jsfiddle.net/mp0a6Ln6/

这篇关于在滚动时，触发事件同时隐藏滚动条和隐藏溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！