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