javascript - div块滚动条如何独立于整个页面的滚动条?
PHP中文网
PHP中文网 2017-04-10 15:21:31
0
2
386

如图:
左边是一个菜单导航条,右边是整块文章的内容(在写blog,文章内容是主要内容,左边菜单是弹出框)
在左边滚动条滚到底部时,继续滚动,整个页面的滚动条也会滚动。
如何滚动左边p块时,不影响整个页面的滚动条
谢谢~

PHP中文网
PHP中文网

认证高级PHP讲师

reply all(2)
Ty80

左边容器设置高度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才能完成。

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template