【实战】前端必会H5效果 —— 元素水平滑动（松手查看更多、滑动回弹）

本文链接：https://blog.csdn.net/qq_32682301/article/details/125909879

文章目录

〇、需求
一、问题
二、解决
- 1.方案一
- 2.方案二

〇、需求

想要实现这种效果
在这里插入图片描述

一、问题

在单独一个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">&#xe736;</i>
				<p>更多案例</p>
			</span>
			...
		</div>
	</div>
</div>

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.方案一

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'})
}

需要注意的是，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"})

在这里插入图片描述
由于 scrollIntoView 的 options 不支持 ios 系浏览器，因此放弃，改用方案一

拓展阅读：