el-autocomplete 当页面滚动但滚动区域不为window时，弹出层定位不准确问题

问题

element中el-autocomplete组件，当页面滚动但滚动区域不为window时，弹出层定位不准确问题

解决方案

研究源码发现，el-autocomplete所依赖的popperjs有监听window滚动事件，能够在页面滚动时实时更新popper的位置。
但因为我的布局滚动区域不是window，而是内容区域所在div。接下来我提供一种思路。在mounted方法中监听滚动容器的滚动事件。一旦滚动，获取popper元素，调用update()方法，重新计算位置。

popperjs有提供update()方法，可以重新计算popper位置（即更新下图红色所示区位置）

代码示例

• 这里面ref是关键，通过ref一层层获取popperjs对象

 <el-autocomplete ref="myAutocomplete"></el-autocomplete>

• 更新位置的方法

 this.$refs.myAutocomplete.$refs.suggestions.popperJS.update(）

• 监听滚动事件，实时更新位置

/**  page滚动同步更新popper位置事件 */
      registerScrollEvent () {
        let rightPage = document.getElementById('homeContent')
        rightPage.addEventListener('scroll', this.pageScrollEvent)
      },
      pageScrollEvent () {
        let self = this
        requestAnimationFrame(function () {
          self.$refs.myAutocomplete&& self.$refs.myAutocomplete.$refs && self.$refs.myAutocomplete.$refs.suggestions && self.$refs.myAutocomplete.$refs.suggestions.popperJS && self.$refs.myAutocomplete.$refs.suggestions.popperJS.update(）
        })
      },
      /** 取消page滚动同步更新popper位置事件 */
      unRegisterScrollEvent () {
        let rightPage = document.getElementById('homeContent')
        rightPage.removeEventListener('scroll', this.pageScrollEvent)
      },

我的布局