Vue没有滚动到元素

问题描述

我有一个文本区域，该文本区域随着其中更多文本的增长而扩展。但是，在某些时候，它会超出页面底部。我希望页面随着文本区域的扩展向下滚动。

我尝试使用scrollIntoView()，window.scrollTo(0,document.body.scrollHeight)和我能找到的每种滚动方法（以及其他SO解决方案）。

这是我尝试过的几种方法的组成部分。

<template>
  <div class="inline-block relative w-100">
    <div>
      <textarea
        ref          = "textarea"
        :class       = "[...classes,' relative pr4']"
        :placeholder = "placeholder"
        :style       = "computedStyles"
        v-model      = "value"
        @focus       = "resize" >
      </textarea>
      <button class  = "absolute bottom-1 right-0 z-1 b--none bg-transparent f3"
              v-if   = "value && !awaitingResponse"
              @click = "submit" >
        <f7-icon
          fa     = "arrow-circle-up"
          class  = "color-medium-blue"
        />
      </button>
      <span v-if="awaitingResponse" class="preloader preloader absolute bottom-1 right-0 z-1"></span>
    </div>
    <div ref="bottom" id="bottom"></div>
  </div>
</template>

<script>
  export default {
    props: {
      // Public: Whether the component should automatically be resized.
      autoResize:       { default: true },// Public: Whether the parent is awaiting a submission response.
      awaitingResponse: { default: false },// Public: Classes for <textarea>.
      classes:          { default: '' },// Public: Maximun height before scrollbar appears.
      maxHeight:        { default: null },// Public: Starting height of text area.
      minHeight:        { default: null },// Public: Placeholder text for the input.
      placeholder:      { default: '' }
    },data() {
      return {
        // Public: Height of <textarea>.
        height:       'auto',// Public: Whether to render scroll within <textarea>.
        renderScroll: false,// Public: Value of text area.
        value:        null,}
    },computed: {
      computedStyles() {
        if (!this.autoResize) return {}

        return {
          height: this.height,overflow: this.renderScroll ? 'auto' : 'hidden',resize: 'none'
        }
      }
    },methods: {
      // Public: Focus on input.
      focus() {
        this.$refs.textarea.focus()
      },// Internal: Resize the <textarea> to fit text.
      resize() {
        this.height = 'auto'
        this.scrollToEnd()
        this.scroll()

        this.$nextTick(() => {
          let contentHeight = this.$refs.textarea.scrollHeight + 1

          // Don't make smaller than minimun height.
          if (this.minHeight) {
            contentHeight = contentHeight < this.minHeight ? this.minHeight : contentHeight
          }

          // If larger than maximun height,set height to max && scroll.
          if (this.maxHeight) {
            if (contentHeight > this.maxHeight) {
              contentHeight     = this.maxHeight
              this.renderScroll = true
            } else {
              this.renderScroll = false
            }
          }

          this.height = `${contentHeight}px`
          this.scroll()
          this.scrollToEnd()
        })
      },scroll() {
        this.$refs.bottom.scrollIntoView()
        document.getElementById('bottom').scrollIntoView()
      },scrollToEnd() {
        const container = this.$refs.bottom
        container.scrollTop = container.scrollHeight
      },// Public: Return the <textarea> value to the parent component.
      submit() {
        if (this.awaitingResponse) return

        this.$emit('submit',this.value)
      }
    },watch: {
      value() {
        this.$nextTick(this.resize)
      }
    }
  }
</script>

这里也是一个JsFiddle，并带有示例。我还尝试发出一个事件，使父组件句柄滚动到没有运气。我最好的猜测是调整大小会造成干扰，但是我还没有找到在哪里调用该方法以使其起作用。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）