search

Home  >  Q&A  >  body text

javascript - div块滚动条如何独立于整个页面的滚动条?

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

PHP中文网PHP中文网2820 days ago385

reply all(2)I'll reply

  • PHP中文网

    PHP中文网2017-04-10 15:23:31

    左边容器设置高度height: 100%,然后在设置overflow-y: scroll

    reply
    0
  • ringa_lee

    ringa_lee2017-04-10 15:23:31

    $("#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才能完成。

    reply
    0
  • Cancelreply