Vue实现csdn新建实时预览，同步滚动

<template>
    <div class="fillHeight">
        <div class="container fillHeight">
            <div class="row fillHeight">
                <div class="col-xs-6 fillHeight">
                    <div class="panel panel-danger">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <span class="h5">新建</span>
                            </div>
                        </div>
                        <div class="panel-body">
                            <textarea @scroll="contentScroll($event)"
                                      @mouseover="mouseover(1)"
                                      @change="showdown()"
                                      @input="showdown()"
                                      class="form-control"
                                      v-model="content"></textarea>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6 fillHeight">
                    <div class="panel panel-danger">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <span class="h5">预览</span>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div @scroll="showContentScroll($event)"
                                 @mouseover="mouseover(2)"
                                 v-html="showContent"
                                 class="showContent"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Markdown",
        data() {
            return {
                content: '',
                showContent: '',
                currentTap: 0,
                score: 0
            }
        },
        methods: {
            showdown() {
                const converter = new showdown.Converter({extensions: ['table']});
                this.showContent = converter.makeHtml(this.content);
                const contentHeight = $('textarea').prop('scrollHeight'),
                    textareaHeight = $('textarea').height(),
                    showContentHeight = $('.showContent').prop('scrollHeight');
                this.score = (showContentHeight - textareaHeight) / (contentHeight - textareaHeight);
            },
            contentScroll(event) {
                if (this.currentTap != 1) {
                    return;
                }
                $('.showContent')[0].scrollTop = event.target.scrollTop * this.score;
            },
            showContentScroll(event) {
                if (this.currentTap != 2) {
                    return;
                }
                $('textarea')[0].scrollTop = event.target.scrollTop / this.score;
            },
            mouseover(m) {
                this.currentTap = m;
            }
        }
    }
</script>

<style scoped>
    .panel {
        margin-bottom: 0;
        position: absolute;
        top: 0;
        right: 15px;
        bottom: 0;
        left: 15px;
    }

    .panel-body {
        padding: 0;
        position: absolute;
        top: 42px;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .form-control {
        border: none;
    }

    textarea {
        height: 100%;
        resize: none;
        border: none;
    }

    .form-control:focus {
        border-color: transparent;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }


    .showContent {
        overflow-y: auto;
        height: 100%;
        padding: 6px 12px;
    }

    .showContent >>> table {
        width: 80% !important;
        border: 1px solid #ddd !important;
    }

    .showContent >>> table thead tr {
        height: 38px !important;
    }

    .showContent >>> table thead tr th {
        background-color: rgb(64, 158, 255);
        color: #fafafa;
        padding-left: 10px;
        border: 1px solid #ddd !important;
    }

    .showContent >>> table tbody tr td {
        padding-left: 10px;
        border: 1px solid #ddd !important;
        height: 38px !important;
        line-height: 38px !important;
    }

    .showContent >>> table tbody tr td p {
        padding: 0 !important;
        margin: 0 !important;
    }

    .showContent >>> table tbody tr:hover {
        background: rgb(248, 248, 248) !important;
    }

    .showContent >>> p {
        word-break: normal !important;
        word-wrap: break-word;
    }

    .showContent >>> p font {
        line-height: 20px;
    }

    .showContent >>> pre {
        background-color: rgb(252, 252, 252);
        border: 1px solid rgb(225, 225, 232);
    }

    .showContent >>> pre code {
        color: #080;
    }


    ::-webkit-scrollbar {
        width: 6px;
    }

    /*滚动槽*/
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 5px;
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #57d1f7;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    }

    ::-webkit-scrollbar-thumb:window-inactive {
        background: #57d1f7;
    }

    ::-webkit-scrollbar-thumb:hover {
        cursor: pointer !important;
        background: red;
    }

</style>