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

2018-11-30 13:09:27 +08:00
 alwayshere

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

2078 次点击
所在节点    程序员
9 条回复
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
自己动手嘛
绑定事件,当滑动的时候改变 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;

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/513051

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX