function debounce(fn, interval = 500) {
let timeout = null; return function () {
clearTimeout(timeout);
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, interval);
};
}
用处：判断某个
动作结束，如刚刚的滚动结束、input输入结束等✅解决IOS设备局部滚动不顺畅(粘手)
除了浏览器原生滚动，
自定义的滚动条都会出现这种情况，加以下属性就可以解决：
.box {
-webkit-overflow-scrolling: touch;
}对比如下：
注意：要真机才能看到效果，这里指的
局部滚动是指
自己定义的盒子，然后设置
overflow: auto || scroll;后的滚动行为；滚动传播
指有多个
滚动区域，当一个
滚动区域滚动完之后，继续滚动会
传播到到父区域继续滚动的行为：
.box {
overscroll-behavior: contain; // 阻止滚动传播
}对比效果图如下：
横向滚动
移动端遇到此需求比较多，常用于图片展示：
<ul>
<li>
<img src="">
</li>
// ...
</ul>ul {
white-space: nowrap; // 超出不换行
overflow-x: auto;
li {
display: inline-block;
img {
display: block;
width: 200px;
}
}
}
效果如下：
滚动结束后，强制滚动到指定元素
基于上面的例子，我们设置如下属性：
ul {
scroll-snap-type: x mandatory; li {
scroll-snap-align: start;
}
}
效果如下：
仔细看会发现，我们松手的时候，会将
最近的元素滚动到最右边（初始位置，对于Y轴来讲就是顶部，X轴则是右边）
