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的局部滚动，中间这块不能出现滚动条。还要考虑阻止浏览器滚动条事件。需求是：用鼠标滑轮滚动。li会下滚或者上滚。前提是我这个鼠标在这里center范围，在范围外面可以使用浏览器的滚动事件，里面的禁止。

问题解答

用这个scroll事件来控制box的position .

通过scroll事件来获取滚动的方向，通过你自己的程序计算来调整p的position，css3可以用transform，不支持css3用left,top

外层包裹一个p，设置overflow:hidden，刚好覆盖住内层的滚动条。鼠标滚动事件。$(’.center’).on（）响应鼠标事件，然后阻止冒泡即可。