el-popover不随页面滚动

要使el-popover不随页面滚动，可以设置其定位方式为固定（position:fixed），并指定其相对于页面的位置。可以通过el-popover组件的属性或CSS样式来实现。

例如，可以在el-popover的属性中设置：

<el-popover
  placement="bottom"
  :visible-arrow="false"
  :popper-options="{positionFixed: true}"
  >
  <!-- popover内容 -->
</el-popover>

或者在CSS中设置：

.el-popover__popper {
  position: fixed;
  top: 100px;
  left: 100px;
}

其中，top和left属性可以根据需要进行调整，以使popover出现在合适的位置。

相关问题

el-popover 滚动条跟随滚动

el-popover 是 Element UI 提供的一个弹出框组件，可以用于实现一些提示、说明等功能。如果希望 el-popover 的内容随着页面滚动而跟随滚动，可以使用以下方法：

1. 使用插槽（slot）的方式自定义 el-popover 的内容，将需要跟随滚动的部分放在一个容器内；
2. 在 el-popover 中添加一个监听滚动事件的钩子函数，并在钩子函数中更新需要跟随滚动的部分的位置，使其保持与 el-popover 组件的位置对齐。

以下是一个示例代码：

<el-popover ref="popover" placement="top">
  <div slot="content" ref="contentWrapper" @scroll="handleScroll">
    <!-- 需要跟随滚动的部分 -->
  </div>
</el-popover>

<script>
export default {
  methods: {
    handleScroll() {
      const popoverEl = this.$refs.popover.$el;
      const contentWrapperEl = this.$refs.contentWrapper;
      contentWrapperEl.style.top = `${popoverEl.offsetTop}px`;
      contentWrapperEl.style.left = `${popoverEl.offsetLeft}px`;
    }
  }
}
</script>

在 handleScroll 钩子函数中，首先获取 el-popover 组件和需要跟随滚动的部分的元素，并更新需要跟随滚动的部分的位置，使其保持与 el-popover 组件的位置对齐。这样就可以实现 el-popover 滚动条跟随滚动的效果。

el-popover不显示滚动条

el-popover不显示滚动条的问题可能是由于样式设置不正确导致的。根据引用\[2\]中的描述，el-popover中含有滚动事件，触发滚动事件的同时，底部页面也同时触发。为了解决这个问题，可以在el-popover中添加一个滚动容器，并设置其高度和overflow属性来显示滚动条。

首先，你可以在el-popover的内容中添加一个div作为滚动容器，并设置其高度和overflow属性，例如：

<el-popover>
  <div class="scroll-container" style="height: 200px; overflow: auto;">
    <!-- 内容 -->
  </div>
</el-popover>

然后，你可以在样式中为滚动容器添加样式，例如：

.scroll-container {
  /* 样式设置 */
}

这样，滚动容器就会显示滚动条了。如果你想要在el-popover关闭时恢复底部页面的滚动，可以在el-popover的@hide事件中调用恢复滚动的方法，例如：

<el-popover @hide="this.canScroll()">
  <!-- 内容 -->
</el-popover>

通过以上的设置，el-popover应该可以正确显示滚动条了。如果还有其他问题，请参考引用\[1\]和引用\[3\]中的解决方法。
#### 引用[.reference_title]
- *1* [【bug】el-popover样式问题引起页面双滚动条，单独页面设置body样式](https://blog.csdn.net/weixin_49668076/article/details/128575880)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [Vue+ElementUI使用el-popover内滚动事件穿透解决](https://blog.csdn.net/qq_40836414/article/details/112697273)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [el-popover 初始弹出位置不准确，及el-popover超出屏幕问题](https://blog.csdn.net/weixin_37739550/article/details/125757697)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]