下拉列表无限下拉

一、参考的文章

原生js实现简单的下拉加载

Element-ui 组件数据懒加载(el-menu举例)

Vue element-ui表格数据懒加载

自定义指令——Select下拉选择器实现懒加载和无限加载

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决

花点时间记住scrollTop、clientHeight、offsetTop、scrollHeight

dom.scrollHeight - dom.scrollTop - dom.clientHeight > y

1. 懒加载：下拉列表分页、下拉加载图片
   懒加载的思路简而言之是按需加载。这个按需我们怎么来判断呢？
   这里的按需指的就是：是否已经滚动到底部了？
   若滚动到底部，我们就获取下一页的数据。
   判断是否滚动到底部还记得是哪个公式吗？
   而实际情况中，不一定就是滚动到底部，可以使滚动到底部某个区间就进行获取下一页数据这个操作。

公式：scrollHeight - scrollTop - offsetHeight < y

div上添加scroll监听事件失败的原因

vue为什么直接在元素上绑定scroll事件不会监听到？

高度限制
overflow: auto;
addeventlistener

vue 监听滚动高度_VUE中@scroll失败的真相

scroll直接绑定在window的捕获阶段
使用开发者工具 performance 录制滚动动作，event log 里查看scroll事件的目标元素，然后亲手给这个元素绑定scroll（别忘了它不会冒泡的），如果目标元素是 #document ，只能在 created 里 addEventListener
如果必须使用@scroll事件，检查以下:
是否确定了高度(写一行height:100vh，不要随意100%，因为不能保证上一级或者上上一级一定就高度确定)，
是否为overflow：scroll / auto
然后 performance录制触发scroll检查是不是你想要的元素

VUE刷新后回到顶部

vue项目中，页面刷新回到页面顶部的方法

二、我的代码

方法一：window.addEventListener(‘scroll’, fun, true)

<template>
  <div id="scroll_content" style="padding:30px;">
    <ul v-for="(item, index) of list" :key="index">
      <li>{
   {
    item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
   
  data() {
   
    return {