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

V2EX = way to explore

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

For Existing Member Sign In

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 2709 days ago, the information mentioned may be changed or developed.

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

9 replies • 2018-11-30 14:13:49 +08:00

fannuoer

Nov 30, 2018

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

alwayshere

Nov 30, 2018

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

indomi

Nov 30, 2018 via Android

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

daishankeke

Nov 30, 2018

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

daishankeke

Nov 30, 2018

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

OSF2E

Nov 30, 2018

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

wly19960911

Nov 30, 2018

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

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

wly19960911

Nov 30, 2018

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

gzf6

Nov 30, 2018

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