先上一段代码
这个函数用于以反比例曲线平滑滚动页面：
这里用闭包实现是为了能如下图这样方便地 在添加回调事件的同时传参：
但是这个函数存在一个影响用户体验的滚动问题，上动图：
我在页面自动滚动快结束的时候（有时候就想快点翻），向下滑动鼠标滚轮，然而这个函数却是不到目标位置不罢休。
由于我向下滚动略过了锚定位置，而 Interval 并没有捕捉到路过锚定的状态，所以页面反而会向上滚动。
解决方法很简单，我立刻想到了 event.preventDefault() 。
我只要在开始动画前监听 mousewheel 事件，然后在回调函数中写下这一行来阻止默认行为即可。
当然，动画结束时一定要 removeEventListener 清除监听。
经过修改后，这个函数是这样的：
注：关于 addEventListener 方法的第三个参数{ passive: false }，用于成功调用 e.preventDefault().
详情移步 → https://blog.csdn.net/csdnXiaoZou/article/details/87276026，这位博主写的很详细
上面的代码很简单，
当动画结束时，清除当前定时器，并移除当前 mousewheel 回调事件。
当新动画开始时，清除上一个定时器，并移除上一个 mousewheel 回调事件。
然后就出了问题，当我连续触发两次动画后，滚动鼠标滚轮就没用了，同时控制台在滚动时输出1。
这代表上一个回调事件并没有被正确清除。
于是我下断点跟着走了一遍，代码确实跑对了地方，那问题就出在闭包中。
分析了半天，还是没有头绪。万般无奈之下，开始查文档，百度 + Google。
查资料的时候突然看到一句话，大概意思是，必须保证 add 和 remove 时的函数指针相同。
这我当然是早就知道的，但我思考了一下，问题只能出现在这里，于是试着调试了一下函数指针
输出：
恍然大悟，每次调用函数都重新定义了一遍 stop_scroll ，于是后一次的 stop_scroll 与前一次并不相同。
那么只要把函数拿出来就好了。
于是改成这样：
问题解决，但总感觉这样不够优雅，毕竟我是封装了一个函数，这多出来一个函数算怎么回事？
于是我又试着改了改，这样就可以了：
函数内声明一个全局变量来存这个回调函数。
至此完美解决！
还有一个思路，这里直接强硬地禁止用户滚动页面，而实际上我们可以当用户滚动滚轮时直接停止动画。
另一个，再参考大多数网站的做法，即滚动位置不依赖于当前的 window,pageYOffset，而是自己维护一个变量，记录这一步该到哪了。
加了一个参数，代表滚动过程中禁止用户滚动还是用户滚动即停。
接口优雅了许多，但函数一点也不优雅…
甚至有些地方用到了两层的闭包，但是也是为了防止写更多代码（小声bb… addEventListener 没有给出传参的方法）
代码：
//...
function scroll_smooth(y, velocity, interval, callback, stopScroll = true) {
if (stopScroll) {
if (typeof stop_scroll === 'undefined') {
stop_scroll = function(e) {// 事件回调函数
e.preventDefault();
};
}
} else {
if (typeof get_state === 'undefined') {
var fun_list = function() {
var state = false; // false 用户未滚动
return [
function() {
return state;
},
function(state_) {
return function() {
console.log(state);
state = state_;
}
}
];
}();
var get_state = fun_list[0];
var set_state = fun_list[1];
}
}
function animate(y, velocity, interval, callback) {
if (stopScroll) {
document.addEventListener('mousewheel', stop_scroll, {
passive: false
});
} else {
temp_fun = set_state(true);
document.addEventListener('mousewheel', temp_fun);
}
this.timer = setInterval(() => {
if (!stopScroll) {
if (get_state() === true) { // 判断用户滚动
clearInterval(this.timer);
document.removeEventListener('mousewheel', temp_fun);
callback && callback();
return;
}
}
if (window.pageYOffset != y) { // 滚动过程
var step = (y - window.pageYOffset) / velocity
window.scroll(0, window.pageYOffset + (step < 0 ? Math.floor(step) : Math.ceil(step)));
} else {
callback && callback();
clearInterval(this.timer);
if (stopScroll) {
document.removeEventListener('mousewheel', stop_scroll);
}
}
}, interval);
}
return function() {
clearInterval(this.timer);
if (stopScroll) { // 清除事件回调
document.removeEventListener('mousewheel', stop_scroll);
} else {
if (typeof temp_fun !== 'undefined') {
document.removeEventListener('mousewheel', temp_fun);
}
}
animate(y, velocity, interval, callback);
};
}