是否有触摸滑动 js 能做到像 iOS 上 Apple Music「为你推荐」顶部卡片左右滑动那样的效果？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2444 天前的主题，其中的信息可能已经有所发展或是发生改变。

也就是说，滑动后都会定格在某张卡片上，而不是自由位置。滑动效果与之相似度越高越好哦。

滑动

卡片

Apple

Music

10 条回复 • 2021-11-01 23:49:11 +08:00

noe132

2018-04-14 01:34:04 +08:00

没有用过 Apple Music.
当然是可以的。
计算一下每张卡片的相对于 container 的 offsetTop，然后触摸滑动停止后找到最近的卡片，scroll container 到指定位置对齐就可以了。

congeec

2018-04-14 01:55:31 +08:00

Carousel

paloalto

2018-04-14 11:44:17 +08:00 via iPhone

http://idangero.us/swiper/demos/

hronro

2018-04-15 00:34:17 +08:00

你能不能录个 GIF，到底是啥样的效果？

islujw

2018-04-15 07:14:35 +08:00

@paloalto 赞👍感谢！

islujw

2018-04-15 07:23:33 +08:00

@paloalto 不过如果能只能判断，非触屏设备禁止鼠标滑动，Mac 用触摸板滑动等等，就更好了。

paloalto

2018-04-15 12:04:01 +08:00

@islujw #6 根据 UA 判断设备，然后控制这个： http://idangero.us/swiper/api/#mousewheel

islujw

2018-05-06 18:59:17 +08:00

@paloalto 多谢！还有 Apple Music 为你推荐页的「最近播放」，是可以自由滚动的，但总是会刚好在固定的位置停下来（如果只移动很小的一段距离则会被反弹回来不让移动）。

q2569628572

2021-04-06 11:09:32 +08:00

我尝试用 jQuery 做了一个效果差不多的
demo： https://www.hxmusic.xyz/home

islujw

2021-11-01 23:49:11 +08:00

@q2569628572 不好意思啊，太久没上线，刚看到。这个页面已经打不开了😂