V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
alwayshere
V2EX  ›  程序员

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

  •  
  •   alwayshere · 2018-11-30 13:09:27 +08:00 · 1882 次点击
    这是一个创建于 1973 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    screencapture-google-search-2018-11-30-13_10_58.jpg

    9 条回复    2018-11-30 14:13:49 +08:00
    fannuoer
        1
    fannuoer  
       2018-11-30 13:20:31 +08:00
    感觉 css 就可以做到差不多的效果
    alwayshere
        2
    alwayshere  
    OP
       2018-11-30 13:21:10 +08:00
    @fannuoer 那有没有相关 css 相关的教程代码?
    indomi
        3
    indomi  
       2018-11-30 13:25:44 +08:00 via Android
    自己动手嘛
    绑定事件,当滑动的时候改变 left 值
    daishankeke
        4
    daishankeke  
       2018-11-30 13:31:27 +08:00
    https://codepen.io/kong777/pen/dQwMEP
    试试这个能不能满足你的需求,简单几行代码。
    原理是:
    1. 让列表内的原色成为行内块元素
    2. 强制列表元素不换行
    3. 让列表溢出部分出现滚动条
    你可以通过样式隐藏滚动条这样效果是差不多的
    daishankeke
        5
    daishankeke  
       2018-11-30 13:32:30 +08:00
    @daishankeke
    1. 让列表内的元素成为行内块元素
    打错字了
    OSF2E
        6
    OSF2E  
       2018-11-30 13:33:38 +08:00
    推荐一个全能框架,https://www.swiper.com.cn/
    wly19960911
        7
    wly19960911  
       2018-11-30 13:38:19 +08:00
    我还以为什么。。。我看了下,这个是 overflow-y: hidden + overflow-x: scroll 实现的,至于为什么没有滚动条

    #hdtb-sc::-webkit-scrollbar {
    display: none;
    }
    因为去掉了。
    wly19960911
        8
    wly19960911  
       2018-11-30 13:39:08 +08:00
    能用 css 的不要用 JS,没意义,这个东西效果不复杂,没有交互,就没必要想着用 js。
    gzf6
        9
    gzf6  
       2018-11-30 14:13:49 +08:00
    display: -webkit-box;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3222 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 13:24 · PVG 21:24 · LAX 06:24 · JFK 09:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.