在移动端，如果你使用过 overflow: scroll 生成一个滚动容器，会发现它的滚动是比较卡顿，呆滞的。为什么会出现这种情况呢？
因为我们早已习惯了目前的主流操作系统和浏览器视窗的滚动体验，比如滚动到边缘会有回弹，手指停止滑动以后还会按惯性继续滚动一会，手指快速滑动时页面也会快速滚动。而这种原生滚动容器却没有，就会让人感到卡顿。
首先，让我们来看一下它是怎样让滚动更流畅的吧。文章来源：https://www.toymoban.com/news/detail-840871.html
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
<template id="tpl">
<div
class="wrapper"
ref="wrapper"
@touchstart.prevent="onStart"
@touchmove.prevent="onMove"
@touchend.prevent="onEnd"
@touchcancel.prevent="onEnd"
@mousedown.prevent="onStart"
@mousemove.prevent="onMove"
@mouseup.prevent="onEnd"
@mousecancel.prevent="onEnd"
@mouseleave.prevent="onEnd"
@transitionend="onTransitionEnd"
>
<ul class="list" ref="scroller" :style="scrollerStyle">
<li class="list-item" v-for="item in list">{{item}}</li>
</ul>
</div>
</template>
<style>
body,
ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.list {
background-color: #70f3b7;
}
.list-item {
height: 40px;
line-height: 40px;
width: 100%;
text-align: center;
border-bottom: 1px solid #ccc;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
console.log(Vue, "sss");
new Vue({
el: "#app",
template: "#tpl",
computed: {
list() {
let list = [];
for (let i = 0; i < 100; i++) {
list.push(i);
}
return list;
},
scrollerStyle() {
return {
transform: `translate3d(0, ${this.offsetY}px, 0)`,
"transition-duration": `${this.duration}ms`,
"transition-timing-function": this.bezier,
};
},
},
data() {
return {
minY: 0,
maxY: 0,
wrapperHeight: 0,
duration: 0,
bezier: "linear",
pointY: 0, // touchStart 手势 y 坐标
startY: 0, // touchStart 元素 y 偏移值
offsetY: 0, // 元素实时 y 偏移值
startTime: 0, // 惯性滑动范围内的 startTime
momentumStartY: 0, // 惯性滑动范围内的 startY
momentumTimeThreshold: 300, // 惯性滑动的启动 时间阈值
momentumYThreshold: 15, // 惯性滑动的启动 距离阈值
isStarted: false, // start锁
};
},
mounted() {
this.$nextTick(() => {
this.wrapperHeight =
this.$refs.wrapper.getBoundingClientRect().height;
this.minY =
this.wrapperHeight -
this.$refs.scroller.getBoundingClientRect().height;
});
},
methods: {
onStart(e) {
const point = e.touches ? e.touches[0] : e;
this.isStarted = true;
this.duration = 0;
this.stop();
this.pointY = point.pageY;
this.momentumStartY = this.startY = this.offsetY;
this.startTime = new Date().getTime();
},
onMove(e) {
if (!this.isStarted) return;
const point = e.touches ? e.touches[0] : e;
const deltaY = point.pageY - this.pointY;
this.offsetY = Math.round(this.startY + deltaY);
const now = new Date().getTime();
// 记录在触发惯性滑动条件下的偏移值和时间
if (now - this.startTime > this.momentumTimeThreshold) {
this.momentumStartY = this.offsetY;
this.startTime = now;
}
},
onEnd(e) {
if (!this.isStarted) return;
this.isStarted = false;
if (this.isNeedReset()) return;
const absDeltaY = Math.abs(this.offsetY - this.momentumStartY);
const duration = new Date().getTime() - this.startTime;
// 启动惯性滑动
if (
duration < this.momentumTimeThreshold &&
absDeltaY > this.momentumYThreshold
) {
const momentum = this.momentum(
this.offsetY,
this.momentumStartY,
duration
);
this.offsetY = Math.round(momentum.destination);
this.duration = momentum.duration;
this.bezier = momentum.bezier;
}
},
onTransitionEnd() {
this.isNeedReset();
},
momentum(current, start, duration) {
const durationMap = {
noBounce: 2500,
weekBounce: 800,
strongBounce: 400,
};
const bezierMap = {
noBounce: "cubic-bezier(.17, .89, .45, 1)",
weekBounce: "cubic-bezier(.25, .46, .45, .94)",
strongBounce: "cubic-bezier(.25, .46, .45, .94)",
};
let type = "noBounce";
// 惯性滑动加速度
const deceleration = 0.003;
// 回弹阻力
const bounceRate = 10;
// 强弱回弹的分割值
const bounceThreshold = 300;
// 回弹的最大限度
const maxOverflowY = this.wrapperHeight / 6;
let overflowY;
const distance = current - start;
const speed = (2 * Math.abs(distance)) / duration;
let destination =
current + (speed / deceleration) * (distance < 0 ? -1 : 1);
if (destination < this.minY) {
overflowY = this.minY - destination;
type =
overflowY > bounceThreshold ? "strongBounce" : "weekBounce";
destination = Math.max(
this.minY - maxOverflowY,
this.minY - overflowY / bounceRate
);
} else if (destination > this.maxY) {
overflowY = destination - this.maxY;
type =
overflowY > bounceThreshold ? "strongBounce" : "weekBounce";
destination = Math.min(
this.maxY + maxOverflowY,
this.maxY + overflowY / bounceRate
);
}
return {
destination,
duration: durationMap[type],
bezier: bezierMap[type],
};
},
// 超出边界时需要重置位置
isNeedReset() {
let offsetY;
if (this.offsetY < this.minY) {
offsetY = this.minY;
} else if (this.offsetY > this.maxY) {
offsetY = this.maxY;
}
if (typeof offsetY !== "undefined") {
this.offsetY = offsetY;
this.duration = 500;
this.bezier = "cubic-bezier(.165, .84, .44, 1)";
return true;
}
return false;
},
// 停止滚动
stop() {
const matrix = window
.getComputedStyle(this.$refs.scroller)
.getPropertyValue("transform");
this.offsetY = Math.round(+matrix.split(")")[0].split(", ")[5]);
},
},
});
</script>
</body>
</html>
可以发现，在增加惯性滚动，边缘回弹等效果之后，明显流畅、舒服了很多。那么，这些效果是怎么实现的呢？在用户滑动操作结束时，还会继续惯性滚动一段。首先看一下源码中的函数，这是 touchend 事件的处理函数，也就是用户滚动操作结束时的逻辑。文章来源地址https://www.toymoban.com/news/detail-840871.html
到了这里，关于给你的H5页面加上惯性滚动吧！的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
