对于网页中 tabs，在手机等窄屏幕上，怎样实现可以左右滑动，有没有现成的 js 库？

V2EX = way to explore

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

现在注册

已注册用户请登录

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

比如谷歌的手机搜索页面，搜索框下方的 tabs，因为所有的 tabs 超过了屏幕宽度，所以可以用手左右滑动，有没有现成的 js 库可以实现？如下图所示：

9 条回复 • 2018-11-30 14:13:49 +08:00

fannuoer

2018-11-30 13:20:31 +08:00

感觉 css 就可以做到差不多的效果

alwayshere

2018-11-30 13:21:10 +08:00

@fannuoer 那有没有相关 css 相关的教程代码？

indomi

2018-11-30 13:25:44 +08:00 via Android

自己动手嘛
绑定事件，当滑动的时候改变 left 值

daishankeke

2018-11-30 13:31:27 +08:00

https://codepen.io/kong777/pen/dQwMEP
试试这个能不能满足你的需求，简单几行代码。
原理是：
1. 让列表内的原色成为行内块元素
2. 强制列表元素不换行
3. 让列表溢出部分出现滚动条
你可以通过样式隐藏滚动条这样效果是差不多的

daishankeke

2018-11-30 13:32:30 +08:00

@daishankeke
1. 让列表内的元素成为行内块元素
打错字了

OSF2E

2018-11-30 13:33:38 +08:00

推荐一个全能框架，https://www.swiper.com.cn/

wly19960911

2018-11-30 13:38:19 +08:00

我还以为什么。。。我看了下，这个是 overflow-y: hidden + overflow-x: scroll 实现的，至于为什么没有滚动条

#hdtb-sc::-webkit-scrollbar {
display: none;
}
因为去掉了。

wly19960911

2018-11-30 13:39:08 +08:00

能用 css 的不要用 JS，没意义，这个东西效果不复杂，没有交互，就没必要想着用 js。

gzf6

2018-11-30 14:13:49 +08:00

display: -webkit-box;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;