滚动到 vue 可滚动列表中的列表顶部（v-auto-complete）答案

【问题标题】：Scroll to the top of the list in vue scrollable list (v-auto-complete)滚动到 vue 可滚动列表中的列表顶部（v-auto-complete）
【发布时间】：2021-12-29 15:38:27
【问题描述】：

我有一个可滚动的列表，我可以从中选择多个项目。我想以编程方式实现每次更改搜索输入时滚动到列表顶部的方法。

期望的行为：例如；当我在搜索列表中输入“b”并向下滚动时，如果我再次输入“e”，我希望它滚动到最顶部

这是一个显示我想做的代码示例，我尝试了两种不同的方法。我在下面的代码中尝试了两种不同的方法，我利用了 html Element 的 scrollTop 功能和 vuetify 的 goTo 功能，但它们都不起作用。

代码演示->https://www.codeply.com/p/ZGBNEHW7YS

如果演示过期，实际代码；

<div id="app">
    <v-app>
        <v-main class="py-3 px-5">
            <h1 class="teal--text">AutoComplete Infinite Scroll Example</h1>
            <v-autocomplete 
                id="autoComplete"
                ref="autoComplete"
                v-model="selected"
                :items="beers" 
                item-text="name" 
                item-value="id" 
                :search-input.sync="search"
                label="Search the beers.."
                return-object
                multiple
                autocomplete="off"
                >
                <template v-slot:append-item>
                  <div v-intersect="onIntersect" class="pa-4 teal--text">
                     Loading more items ...
                  </div>
                </template>
            </v-autocomplete>
      </v-main>
    </v-app>

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data() {
        return {
          search:'',
          beers: [],
          selected: null,
          perPage: 30,
          page: 1,
        }
    },
    methods: {
        getBeers() {
            console.log('page', this.page)
            const apiUrl = `https://api.punkapi.com/v2/beers?page=${this.page}&per_page=${this.perPage}`
            axios.get(apiUrl)
                .then(response => {
                  this.beers = [
                      ...this.beers,
                      ...response.data
                  ]
            })
        },
        onIntersect () {
            console.log('load more...')
            this.page += 1
            this.getBeers()
        },
    },
    watch:{
        search:function(){
         //first method
          let myId=document.getElementById('autoComplete')
          if(myId){
            myId.scrollTop = 0
    
          }
          
          //second method with ref  and vuetify goto
          this.$nextTick(() => {
            this.$vuetify.goTo(this.$refs.autoComplete) 
          })
        }
    },
    created() {
        this.getBeers()
    }
})

【问题讨论】：

您需要获取该项目的位置并将可滚动容器滚动到该坐标 e。 gscrollableContainer.scrollTop = myIdElement.offsetTop
我已经更新了我的代码来做到这一点，但它仍然没有工作。 @zergski
问题是当我搜索新的@zergski 时元素不存在。如果你想看看，我已经更新了演示中的代码
您需要获取正确的 DOM 元素引用。对于可滚动列表容器和搜索项目。我使用的名称只是示例名称

标签： javascript vue.js scroll vuetify.js

【解决方案1】：

你需要这样的东西（查看完整页面的演示）

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
 data: () => ({
    beers: [],
          selected: null,
          perPage: 30,
          page: 1,
  
  }),
     created() {
        this.getBeers()
    },
  methods: {
    goToTop(){
      this.beers = [];
      this.page = 1;
      this.getBeers();
    },
       getBeers() {
            console.log('page', this.page)
            const apiUrl = `https://api.punkapi.com/v2/beers?page=${this.page}&per_page=${this.perPage}`
            axios.get(apiUrl)
                .then(response => {
                  this.beers = [
                      ...this.beers,
                      ...response.data
                  ]
            })
        },
            onIntersect () {
            this.page += 1
            this.getBeers()
        },
  },
})

.scroll-to-top {
  position:sticky;
  bottom:8px;
  width:100%;
  display:flex;
  justify-content :right;
  background-color: rgba(0, 0, 0, 0); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>


 <div id="app">
  <v-app id="inspire">
    <v-card>
      <v-container fluid>
        <v-row
          align="center"
        >
          <v-col cols="12">
            <v-autocomplete 
                v-model="selected"
                :items="beers" 
                item-text="name" 
                item-value="id" 
                label="Search da beers.."
                return-object
                autocomplete="off"
                >
              
          
               <template v-slot:append-item>
                 <div v-intersect="onIntersect" class="pa-4 teal--text">
                     Loading more items ...
                  </div>
                            <div class="text-right pr-4 scroll-to-top">
                              <v-btn
                                color="primary"
                                small
                                class="align-right"
                                @click="goToTop"
                              >
                                 Go to top
                              </v-btn>
                            </div>
                          </template>
            </v-autocomplete>
          </v-col>
        </v-row>
      </v-container>
    </v-card>
  </v-app>
</div>

【讨论】：

这不起作用。当我在搜索框中输入内容时，光标仍保留在同一位置。而且您更改了需要具有多个属性的代码，以便此滚动功能对滚动有意义
这涵盖了基本功能..现在您可以根据需要扩展它...您可以在搜索发生任何更改时调用该函数...
您创建的 v-btn 在 UI 中不可见。不知道怎么称呼它，基本功能对我不起作用
查看我的代码并与您的代码进行比较
将滚动按钮放入

【解决方案2】：

这是我使用 zergski 的例子解决的方法。

由于打字稿，需要进行铸造。

scrollTop(): void {
  let scrollList = document.querySelector('.v-autocomplete__content')

  let firstElement = document.querySelector('.company-item-name') as HTMLElement

  if (scrollList && firstElement && firstElement.offsetTop) {
    scrollList.scrollTop = firstElement.offsetTop
  }
},

【讨论】：