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這些標簽無效。