<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的局部滾動,中間這塊不能出現滾動條。也要考慮阻止瀏覽器滾動條事件。
需求是:用滑鼠滑輪滾動。 li會下滾或上滾。前提是我這個滑鼠在這裡center範圍,在範圍外面可以使用瀏覽器的滾動事件,裡面的禁止。
用這個scroll事件來控制box的position .
透過scroll事件來取得滾動的方向,透過你自己的程式計算來調整p的position,css3可以用transform,不支援css3用left,top
外層包裹一個p,設定overflow:hidden,剛好覆蓋住內層的捲軸。
滑鼠滾動事件。 $('.center').on()回應滑鼠事件,然後阻止冒泡即可。