如图: 左边是一个菜单导航条,右边是整块文章的内容(在写blog,文章内容是主要内容,左边菜单是弹出框) 在左边滚动条滚到底部时,继续滚动,整个页面的滚动条也会滚动。 如何滚动左边p块时,不影响整个页面的滚动条 谢谢~
认证高级PHP讲师
左边容器设置高度height: 100%,然后在设置overflow-y: scroll。
height: 100%
overflow-y: scroll
$("#p").on('mousewheel', function(){//我这没有做兼容firefox,你可以看下mousewheel var _self = $(this), delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3; if(delta > 0 && _self.scrollTop() === 0){//滑动到顶部,再往上滑就 e.preventDefault(); //滑动到底部,再往下滑就阻止默认行为 }else if(delta < 0 && (_self.scrollTop() == _self.get(0).scrollHeight - _self.height())){ e.preventDefault(); } });
mousewheel的兼容 http://www.zhangxinxu.com/wor...
思路差不多就这样,用纯CSS只能说在滑动的过程中,不会触发浏览器整体的滚动条,但是滑到顶和底是办不到的,还是要借js才能完成。
左边容器设置高度
height: 100%
,然后在设置overflow-y: scroll
。mousewheel的兼容 http://www.zhangxinxu.com/wor...
思路差不多就这样,用纯CSS只能说在滑动的过程中,不会触发浏览器整体的滚动条,但是滑到顶和底是办不到的,还是要借js才能完成。