javascript - jq怎么做局部div滾動?
問題描述
<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的局部滾動,中間這塊不能出現(xiàn)滾動條。還要考慮阻止瀏覽器滾動條事件。需求是:用鼠標(biāo)滑輪滾動。li會下滾或者上滾。前提是我這個鼠標(biāo)在這里center范圍,在范圍外面可以使用瀏覽器的滾動事件,里面的禁止。
問題解答
回答1:用這個scroll事件來控制box的position .
回答2:通過scroll事件來獲取滾動的方向,通過你自己的程序計(jì)算來調(diào)整p的position,css3可以用transform,不支持css3用left,top
回答3:外層包裹一個p,設(shè)置overflow:hidden,剛好覆蓋住內(nèi)層的滾動條。鼠標(biāo)滾動事件。$(’.center’).on()響應(yīng)鼠標(biāo)事件,然后阻止冒泡即可。
相關(guān)文章:
1. android - 使用百度sdk調(diào)用SDKInitializer.initialize(this)時報(bào)錯?2. javascript - 最近用echarts做統(tǒng)計(jì)圖時遇到兩個問題!!3. javascript - react熱加載的一段代碼4. html5 - 用h5本地存儲是否安全?5. 基于Spring MVC Java的配置無法正常工作控制臺顯示無錯誤,但我的jsp頁面未顯示6. javascript - webpack-dev-server和webpack沖突嗎7. 微信公眾號在線生成二維碼帶參數(shù)怎么搞?8. android - 優(yōu)酷的安卓及蘋果app還在使用flash技術(shù)嗎?9. 淺談Vue使用Cascader級聯(lián)選擇器數(shù)據(jù)回顯中的坑10. myeclipse中修改了javaweb的web.xml文件,為什么有時候會自動重新部署生效,有時就不會自動呢?

網(wǎng)公網(wǎng)安備