css3之前,我能想到的大概是在nav上綁定touchstart、touchmove牲迫、touchend事件耐朴,然后獲取位置,并寫判斷設(shè)置最大移動(dòng)距離盹憎。
這里css提供了一個(gè)相當(dāng)簡(jiǎn)單的方法筛峭,overflow-x:scroll;,這個(gè)會(huì)為溢出的nav設(shè)置一個(gè)滾動(dòng)條陪每,但移動(dòng)端是不需要這個(gè)滾動(dòng)條的影晓,所以這里還有另外一個(gè)偽類
? ? ? ? ::-webkit-scrollbar {
? ? ? ? ? ? display: none;
? ? ? ? ? ? width: 0;
? ? ? ? ? ? height: 0;
? ? ? ? }
這里寫一下關(guān)于這個(gè)滑動(dòng)條的其他偽類選擇,可以設(shè)置其樣式:
滾動(dòng)條寬 長(zhǎng),滾動(dòng)條整體部分檩禾,其中的屬性有width,height,background,border等
::-webkit-scrollbar{undefined
? ? ? ? width: 7px;
? ? }
滾動(dòng)條的滑軌背景顏色,可以用display:none讓其不顯示挂签,也可以添加背景圖片,顏色改變顯示效果盼产。
? ? ::-webkit-scrollbar-track{undefined
? ? ? ? background-color: #f5f5f5;
? ? ? ? ? -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.1);
? ? ? border-radius:5px;
}
滑塊顏色
? ? ::-webkit-scrollbar-thumb{undefined
? ? ? ? background-color: rgba(0, 0, 0, 0.2);
? ? ? ? border-radius: 5px;
? ? }
滾動(dòng)條兩端的按鈕饵婆。可以用display:none讓其不顯示戏售,也可以添加背景圖片侨核,顏色改變顯示效果。
? ? ::-webkit-scrollbar-button{undefined
? ? ? ? background-color: #eee;
? ? ? ? display: none;
? }
?橫向滾動(dòng)條和縱向滾動(dòng)條相交處尖角的顏色
? ? ::-webkit-scrollbar-corner{undefined
? ? ? ? background-color: black;
? ? }