zoukankan      html  css  js  c++  java
  • DIV横排/竖排滚动(white-space/::-webkit-scrollbar的使用技巧以及display: inline-block的选择)支持手势

    参考微信的京东客户端http://wqs.jd.com/,实现DIV的横排滚动,且支持手势,并且不会出现滚动跳,效果如下:

    但是观察其div结构是没有使用任何JS去实现。

    一、实现上DIV的横排

    观察其结构发现,使用了white-space: nowrap;这个属性,叫做文本排列方向,参考:http://www.w3school.com.cn/cssref/pr_text_white-space.asp

    如果我们要实现这样的方式,有如下方案:

    1、最外层的DIV设置成固定的宽度,一定是比屏幕大很多,然后DIV内的字块,使用float:left进行向左横排。

    2、使用JS插件,动态计算最外层要用多少DIV,然后进行第一种的操作。

    二、实现横向滚动

    也是观察其结构发现,只使用了overflow-x: auto;这个属性,就能进行横向滚动,包括手势。

    但是奇怪的是,在京东的客户端上滚动的时候是没有滚动条了,而如果单独用上面的属性是会出现横向滚动跳的。

    再次分析其css文件,发现使用了.home_seckill_content::-webkit-scrollbar{0;height:0;display:none;}的属性,::-webkit-scrollbar属于一个伪类,在webkit内核浏览器上特有。

    参考:

    https://zhidao.baidu.com/question/1670525736805449387.html

    http://www.jb51.net/css/155135.html

    http://www.xuanfengge.com/css3-webkit-scrollbar.html

    那么如果我们要在常规的浏览器上实现既能滚动又隐藏滚动条的效果时,思路如下:

    1、定两个DIV,大的DIV包小的DIV,然后小DIV的设置宽或高大于大的DIV,且小的div设置可以滚动overflow:auto,而大的DIV设置滚动条隐藏overflow:hidden。

    参考:

    http://blog.csdn.net/liusaint1992/article/details/51277751

    以上是纯div+css去实现滚动条隐藏的效果,如果是以前的方案,即使使用第三方的JS插件去实现,在移动端再配合移动端事件来去实现。

    然后再观察京东的滚动,发现还加入了-webkit-overflow-scrolling : touch;这样的一个事件。这个事件是为了达到在Safari快速滚动和回弹的效果。

    参考:

    http://blog.csdn.net/hursing/article/details/9186199

    http://www.111cn.net/cssdiv/css/108397.htm

    white-space:nowrap;与display: inline-block;的选择:

    经过测试white-space:nowrap;是针对文本,比如a,span这些标签,用这个属性可以实现一行。而京东上面的html布局已经是a抱歉包裹这span标签,所以符合。

    display: inline-block;这个主要是针对div去实现,而对于a,span这些标签无效。

    float:left也是针对div去实现,对于a,span这些标签无效。

  • 相关阅读:
    结对第一次—原型设计(文献摘要热词统计)
    第一次作业-准备篇
    Alpha冲刺Day9
    Alpha冲刺Day8
    Alpha冲刺Day7
    Alpha冲刺Day6
    Alpha冲刺Day5
    Alpha冲刺Day4
    Alpha冲刺Day3
    Alpha冲刺Day2
  • 原文地址:https://www.cnblogs.com/EasonJim/p/6187232.html
Copyright © 2011-2022 走看看