SOURCE

var opts = {
    text:'滚动条例子占位文字，滚动条例子占位文字，滚动条例子占位文字，滚动条例子占位文字，滚动条例子占位文字，滚动条例子占位文字，滚动条例子占位文字，滚动条例子占位文字。',
    init:function(){
        this.createText();
        this.initScrollbar();
        this.initCorrelationScrollbar();
    },
    // 初始化常规滚动条
    initScrollbar:function(){
         $('body').overlayScrollbars({ });
        //  $('.e-scrollbar-box-1').overlayScrollbars({ });
        //  $('.e-scrollbar-box-2').overlayScrollbars({ });
         $('.e-scrollbar-box-1,.e-scrollbar-box-2').overlayScrollbars({ });

    },
    // 初始化关联滚动条
    initCorrelationScrollbar:function(){
        var instancesA;
        var instancesB;
        instancesA = $("#crollbarA").overlayScrollbars({ 
            callbacks:{
                onScroll:function(){
                    if(instancesB){
                        instancesB.scroll({
                            x: instancesA.scroll().position.x,
                            y: instancesA.scroll().position.y,
                        });
                    }
                }
            }
        }).overlayScrollbars(); 

        instancesB = $("#crollbarB").overlayScrollbars({
            callbacks:{
                onScroll:function(){
                    if(instancesA){
                        instancesA.scroll({
                            x: instancesB.scroll().position.x,
                            y: instancesB.scroll().position.y,
                        });
                    }
                }
            }
         }).overlayScrollbars(); 
    },
    createText:function(){
        var _this = this;
        $('#box').find('p').each(function(){
            var $this = $(this);
            var num = $this.attr('data-num');
            var html_str = '';
            
            for (var i=0; i<num; i++){

                html_str += '<p>' + _this.text + '</p>';
            }

            $this.replaceWith(html_str);
        })
    }
}


$(function(){
    opts.init();
})

<div id="box">
    <div class="e-scrollbar-box">            
        <div class="e-scrollbar-item">
            <h3>嵌套</h3>
            <div class="e-scrollbar-box-1">
                <p data-num="1"></p>
                <div class="e-scrollbar-box-2">
                    <p data-num="8"></p>
                </div>
                <p data-num="4"></p>
            </div>
        </div>
        <hr>
        <div class="e-scrollbar-item">
            <h3>联动</h3>
            <div class="e-scrollbar-linkage">
                <div id="crollbarA" class="e-scrollbar-box-3 e-fl" >
                    <p data-num="12"></p>
                </div>

                <div  id="crollbarB" class="e-scrollbar-box-3 e-fr">
                    <p data-num="12"></p>
                </div>
            </div>
        </div>
    </div>
</div>

.e-scrollbar-box{
    padding: 30px;
}
.e-scrollbar-box p{text-indent: 2em; }
/* 嵌套 */
.e-scrollbar-box-1{
    width: 80%;
    height: 300px;  
    border: solid 1px #ccc;
    padding: 10px;
}
.e-scrollbar-box-2{
    height: 200px;  
    border: solid 1px #ccc;
    width: 80%;
    padding: 10px;
}
/* 联动 */
.e-scrollbar-linkage{
    height: 300px
}
.e-scrollbar-box-3{
    width: 45%;
    height: 100%;
    border: solid 1px #ccc;
}
.e-scrollbar-box-3 p{
    width: 150%;
}




.e-fl{float: left;}
.e-fr{float: right;}