SOURCE

// import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';

// 例子需要，自己弄得资源引进的静态overlayscrollbars-vue文件，下面的写法
var OverlayScrollbarsComponent = OverlayScrollbarsVue.OverlayScrollbarsComponent;



var app = new Vue({
    el: '#app',
    data() {
      return {
          optionsA: {
              callbacks : { onScroll: this.onScrollFnA }
          },
          optionsB: {
              callbacks : { onScroll: this.onScrollFnB }
          },
          text:'滚动条例子占位文字，滚动条例子占位文字，滚动条例子占位文字，滚动条例子占位文字，滚动条例子占位文字，滚动条例子占位文字，滚动条例子占位文字，滚动条例子占位文字。'
        }
    },
    components: {
        'overlay-scrollbars': OverlayScrollbarsComponent
    },
    created(){
        // 美化当前显示页面滚动条
        // OverlayScrollbars(document.querySelectorAll("body"), { }); 
         $('body').overlayScrollbars({ });
    },
    mounted(){
    },
    methods:{
        onScrollFnA(){this.onScrollFn('crollbarA')},
        onScrollFnB(){this.onScrollFn('crollbarB')},
        onScrollFn(_ref){
            let instances1 = this.$refs[_ref].osInstance();
            let instances2 = _ref === 'crollbarA' ? 
                this.$refs['crollbarB'].osInstance() :
                this.$refs['crollbarA'].osInstance();

            if (instances2) {
                instances2.scrollStop().scroll({
                    x: instances1.scroll().position.x,
                    y: instances1.scroll().position.y,
                });
            }
        }
    }
})

<div id="app">
    <div class="e-scrollbar-box">    
        
        <div class="e-scrollbar-item">
            <h3>嵌套</h3>
            <overlay-scrollbars class="e-scrollbar-box-1">
                <p v-text="text"></p>
                <overlay-scrollbars class="e-scrollbar-box-2">
                    <p v-for="i in 8" key="i" v-text="text"></p>
                </overlay-scrollbars>
                <p v-for="i in 4" key="i" v-text="text"></p>
            </overlay-scrollbars>
        </div>
        <hr>
        <div class="e-scrollbar-item">
            <h3>联动</h3>
            <div class="e-scrollbar-linkage">
                <overlay-scrollbars 
                id="crollbarA"
                ref="crollbarA"
                class="e-scrollbar-box-3 e-fl" 
                :options="optionsA"
                >
                    <p v-for="i in 12" key="i" v-text="text"></p>
                </overlay-scrollbars>

                <overlay-scrollbars 
                id="crollbarB"
                ref="crollbarB"
                class="e-scrollbar-box-3 e-fr" 
                :options="optionsB"
                >
                    <p v-for="i in 12" key="i" v-text="text"></p>
                </overlay-scrollbars>
            </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;}