DIV横排/竖排滚动（white-space/::-webkit-scrollbar的使用技巧以及display: inline-block的选择）支持手势

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

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

1、实现上DIV的横排

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

 

若是咱们要实现这样的方式，有以下方案：

一、最外层的DIV设置成固定的宽度，必定是比屏幕大不少，而后DIV内的字块，使用float:left进行向左横排。

二、使用JS插件，动态计算最外层要用多少DIV，而后进行第一种的操做。

2、实现横向滚动

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

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

再次分析其css文件，发现使用了.home_seckill_content::-webkit-scrollbar{width: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

那么若是咱们要在常规的浏览器上实现既能滚动又隐藏滚动条的效果时，思路以下：

一、定两个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这些标签无效。