1首先，打開html編輯器，新建html文件，例如indexhtml2在indexhtml中的ltbody標(biāo)簽中，輸入html代碼ltdiv style=quotposition fixed top 0right0quot導(dǎo)航ltdiv3瀏覽器運(yùn)行indexhtml頁(yè)面，此時(shí)div標(biāo)簽。

然后用jq來(lái)操作鼠標(biāo)經(jīng)過(guò)的時(shí)候，顯示菜單即可如圖，我用到了滑動(dòng)效果，具體可以自己查找一下slideToggle的用法哦。

overflo autooverflowy hiddenwhitespacenowrapwebkitscrollbar 滾動(dòng)條整體 background webkitscrollbarthumb滑塊 background rgba71， 145， 242，5borderradius 5px。

1如果是div設(shè)置了滾動(dòng)條導(dǎo)致滑動(dòng)不順暢，可以在css中加入webkitoverflowscrolling touch2如果是幻燈片，可以用swiper插件一類的3盡量用css3開啟GPU加速css隨便哪里加個(gè)transformtransition3d0，0，0。

H5單頁(yè)面手勢(shì)滑屏切換是采用HTML5 觸摸事件Touch 和 CSS3動(dòng)畫Transform，Transition來(lái)實(shí)現(xiàn)的1實(shí)現(xiàn)原理假設(shè)有5個(gè)頁(yè)面，每個(gè)頁(yè)面占屏幕100%寬，則創(chuàng)建一個(gè)DIV容器viewport，將其寬度width 設(shè)置為500%，然后將5個(gè)頁(yè)面。

原聲的是設(shè)置要?jiǎng)潉?dòng)div的overflewscroll這種方式實(shí)現(xiàn)之后部分機(jī)型會(huì)出現(xiàn)劃動(dòng)不暢，一般使用iscrolljs來(lái)解決移動(dòng)端的一切劃動(dòng)問(wèn)題給分吧。