---

〇、需求

想要实现这种效果

一、问题

在单独一个h5页面中，不调用第三方插件，用最简单代码实现该效果

二、解决

最终发现了两种解决方案，先说一下两个方案的共同前提：

• ① touch 相关事件，判断滑动方向：this.startX - this.endX > 0
• ② 标志元素进入可见区域：marker.getBoundingClientRect().right < window.innerWidth

<div class="case-cards" @touchstart="touchStart" @touchend="touchEnd">
	<div class="case-card" v-for="item in caseList.slice(0, 2)" :key="item.id">
	...
	div>
	<div class="case-card case-card-more">
		<div class="case-cover">
			<img :src="caseList[2].cover || './images/share.png'" :alt="caseList[2].caseTit">
			<span class="case-more">
				<i class="iconfont">i>
				<p>更多案例p>
			span>
			...
		div>
	div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

touchStart(e) {
	this.startX = e.touches[0].clientX;
},
touchEnd(e) {
	this.endX = e.changedTouches[0].clientX;
	if (this.startX - this.endX > 0) {
		// const scroller = document.getElementsByClassName('case-cards')[0]
		const scrollerWrapper = document.getElementsByClassName('case-cards-wrapper')[0]
		const marker = document.getElementsByClassName('case-more')[0]
		if (marker.getBoundingClientRect().right < window.innerWidth) {
			scrollerWrapper.scrollTo({ left: 90, behavior: 'smooth'})
			// marker.scrollIntoView({block: "nearest", inline: "end", behavior: "smooth"})
		}
		console.log(window.innerWidth, marker.getBoundingClientRect().right)
	}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

1.方案一

• Element.scrollTo() - Web API 接口参考 | MDN
• Element.getBoundingClientRect() - Web API 接口参考 | MDN

Element 的scrollTo() 方法可以使界面滚动到给定元素的指定坐标位置。
Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。

核心代码：

if (marker.getBoundingClientRect().right < window.innerWidth) {
	scrollerWrapper.scrollTo({ left: 90, behavior: 'smooth'})
}
1
2
3

需要注意的是，touch事件绑定在 滑动元素，而 scrollTo 由 该元素 的 父容器 执行！！

2.方案二

• Element.scrollIntoView() - Web API 接口参考 | MDN

Element.scrollIntoView() —— 让当前的元素滚动到浏览器窗口的可视区域内

• 默认参数为true：调用该函数，页面发生滚动，使 element 的顶部与视图(容器)顶部对齐;
• 参数为false：使 element 的底部与视图(容器)底部对齐;

我这边需要横向滚动的刚好是三个 card 的 list ，将可见目标设为：

因此使用了 options （具体参数配置参考文档）：

const marker = document.getElementsByClassName('case-more')[0]
marker.scrollIntoView({block: "nearest", inline: "end", behavior: "smooth"})
1
2

由于 scrollIntoView 的 options 不支持 ios 系浏览器，因此放弃，改用方案一

---

拓展阅读：

• js 中关于操纵 Element 进行滚动的方法，都在这了‍‍‍
• Scroller demo
• js实现控制元素左右滚动一段距离，小demo
• javaScript-touch事件详解(touchstart、touchmove和touchend)-滑动事件案例
• touch触摸事件以及常用触摸功能
• 移动端web开发—Touch事件详解_做人要厚道2013的博客-CSDN博客_touch事件
• Hammer.JS - Hammer.js
• H5 列表 flex布局横向滚动+弹性左滑松手查看更多