Как автоматически прокрутить div с textarea в Vue?Как правильно получить элемент? - PullRequest
Новая
       9

Как автоматически прокрутить div с textarea в Vue?Как правильно получить элемент?

0 голосов
/ 21 февраля 2019

Я пытаюсь реализовать этот пример (https://codepen.io/lonekorean/pen/gaLEMR) в Vue.

Мой шаблон: 

 <template>
 <div class = "postbox">
 <div class = "backdrop" ref="backdrop" id="backdrop"></div>
        <at-ta
        :ats="['#']" 
        :members="hashTags"
        v-model="html"
        class="AtTa"> 
        <textarea 
        class="txt"
        ref="textarea"
        id="textarea"
        v-model="html"
        @scroll="handleScroll"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        @keypress.enter="saveTag"
        @keypress.space="saveTag"
        @keyup="highlightedText"
        contenteditable
        ></textarea>
    </at-ta>
 </div>
</template>

, и это моя функция handleScroll () 

  handleScroll(){
        //document.activeElement.parentElement.previousSibling = this.scrollTop
        /*var $backdrop = $('.backdrop');
        var $textarea = $('textarea');
        var scrollTop = (this.$refs.textarea).scrollTop();
        (this.$refs.backdrop).scrollTop(scrollTop);
        var scrollLeft = (this.$refs.textarea).scrollLeft();
 (this.$refs.backdrop).scrollLeft(scrollLeft); */

 var scrollTop = $textarea.scrollTop();
 $backdrop.scrollTop(scrollTop);

 var scrollLeft = $textarea.scrollLeft();
 $backdrop.scrollLeft(scrollLeft);

 //document.activeElement.previousSibling.scrollTop()
    }

Проблема где-то в методе handleScroll (). Он не получает должным образом div и текстовую область. Я пробовал по-разному, поскольку вы видите, что многие строки в методе комментируются. Мой код работаеттеперь точно так же, как при удалении содержимого метода handleScroll () в данном примере (ссылка вверху).

...