求一个 js 写法，弹出的选择器如何选中中间的 li（弹出有的滚动条，滚上滚下自动选中中间的 Li）

V2EX = way to explore

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

现在注册

已注册用户请登录

V2EX 提问指南

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

选择器

选中

写法

弹出

13 条回复 • 2022-04-24 22:54:37 +08:00

DreamCMS

2022-04-24 16:54:56 +08:00

滚动上下的时候，自动选中中间的 LI ，给他 addclass class=this

nitmali

2022-04-24 16:58:59 +08:00

没看懂

pendulum

2022-04-24 17:00:26 +08:00

什么是“弹出有的滚动条”

DreamCMS

2022-04-24 17:01:09 +08:00

@nitmali 选日期不是有类似的 pick 吗，滚动自动选中中间的值

DreamCMS

2022-04-24 17:02:07 +08:00

@pendulum 就是跟日期的一直滚动选中中间的 pick

nitmali

2022-04-24 17:04:32 +08:00

你说的不会是鼠标悬停效果吧

marcong95

2022-04-24 17:06:24 +08:00

li 元素又不接受焦点，DateTimePicker 那种不都是自己实现的么，算好位置之后设置 CSS transform: translateY(xx); 这种感觉

nitmali

2022-04-24 17:08:07 +08:00

我知道你说的什么了。

固定弹出层高度和子项高度，监听滚动，计算滚动距离和修正滚动，可以计算出当前显示在中间的子项

DreamCMS

2022-04-24 17:20:35 +08:00

@nitmali 哈哈哈，已经有意思了，获取可视高度，再计算中间坐标，再选择监听滚动条的位置计算得出中间的变化的坐标

snoopyhai

2022-04-24 17:22:27 +08:00

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/picker

这玩意, 其中有个参数叫 default-index

找找源码, 看看如何实现的.

tyx1703

2022-04-24 18:45:50 +08:00

抛砖引玉，实现了一个轻量版的： https://output.jsbin.com/begibifaza

f0rger

2022-04-24 19:47:04 +08:00 via iPhone

能找到对应 li 然后 scrollIntoView 吗

DreamCMS

2022-04-24 22:54:37 +08:00

@tyx1703 牛逼～