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{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

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

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这些标签无效。

转载于:https://www.cnblogs.com/EasonJim/p/6187232.html