問(wèn)題描述

<style>.top , .bottom{height:130px;background:#000;} .center{height:400px;overflow:hidden;position:relative;}.center .box{width:100%;height:100%;position:absolute;}.center .box ul{overflow:hidden;}.center .box ul li{background:red;height:400px;width:100%;}</style>

<p class='top'></p>

<p class='center'> <p class='box'><ul><li></li><li></li></ul> </p></p>

<p class='bottom'></p>

jq怎么做ul li的局部滾動(dòng)，中間這塊不能出現(xiàn)滾動(dòng)條。還要考慮阻止瀏覽器滾動(dòng)條事件。需求是：用鼠標(biāo)滑輪滾動(dòng)。li會(huì)下滾或者上滾。前提是我這個(gè)鼠標(biāo)在這里center范圍，在范圍外面可以使用瀏覽器的滾動(dòng)事件，里面的禁止。

問(wèn)題解答

用這個(gè)scroll事件來(lái)控制box的position .

通過(guò)scroll事件來(lái)獲取滾動(dòng)的方向，通過(guò)你自己的程序計(jì)算來(lái)調(diào)整p的position，css3可以用transform，不支持css3用left,top

外層包裹一個(gè)p，設(shè)置overflow:hidden，剛好覆蓋住內(nèi)層的滾動(dòng)條。鼠標(biāo)滾動(dòng)事件。$(’.center’).on（）響應(yīng)鼠標(biāo)事件，然后阻止冒泡即可。