开发者社区> 问答> 正文

html+css滚动条隐藏问题

screenshot
这个是今日头条的移动版,(头条网:http://m.toutiao.com/)他这个导航在移动端是可以左右滑动的,但是没有滚动条,我知道用overflow-x:scroll;但是这么用的话,在移动端是没有滚动条的,但是在pc端Chrome就有滚动条了,但是头条这个却没有,我想知道这个怎么实现的,看了好久,没看出来他是怎么弄的,求帮忙

展开
收起
杨冬芳 2016-06-06 10:00:42 3583 0
1 条回答
写回答
取消 提交回答
  • IT从业

    这个叫做触摸导航,用js控制的。

    通过touch系列事件实现,记录初次touchstart的y轴,然后陆续触发touchmove根据初次记录的y轴进行相对的移动,touchcancel触发会进行回弹至开始的位置。

    推荐使用swiper.js功能丰富接口简洁推荐使用

    ----修改----

    纯css实现方法

    1.让菜单列强制一行(no-wrap)同时,菜单列使用display: inline-block进行横向排列.

    2.利用scroll-x使其出现x轴滚动条

    3.利用伪元素::-webkit-scrollbar来隐藏滚动条(但依旧具备滚动的效果)

    http://codepen.io/anon/pen/YyavKR点击预览

    2019-07-17 19:27:44
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载