Web前端篇——ElementUI的Backtop 不显示问题
在使用ElementUI的Backtop回到顶部组件时，单独复制这一行代码
<el-backtop :right="100" :bottom="100" />发现页面在向下滚动时，并未出现Backtop组件。
可从以下3个方向进行分析：
指定target属性，且一定要指向产生滚动条的组件。<el-backtop></el-backtop>一定要写于最外层块级区域的第一行，不可写于代码末尾。- 要滚动的区域不能设置overflow: hidden，否则无法显示。如果你怀疑全局css设置了overflow: hidden，那么你可以在你要滚动的区域上添加样式overflow: auto进行覆盖。
以下为示例代码：
<html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /><script src="https://unpkg.com/vue@next"></script><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"><!-- import JavaScript --><script src="https://unpkg.com/element-plus"></script><title>About</title></head><body><div id="app" class="main_container" style="height:100%;overflow: auto;"><el-backtop target=".main_container"></el-backtop> <!-- Backtop组件 --><!-- 其余代码 --><div class="container"><div style="height: 2400px;"></div></div><div style="height: 2400px;"></div></div><script>const App = {data() {return {};},methods: {}};const app = Vue.createApp(App);app.use(ElementPlus);app.mount("#app");</script></body>
</html>