在使用ElementUI的Backtop回到顶部组件时,单独复制这一行代码
<el-backtop :right="100" :bottom="100" />
发现页面在向下滚动时,并未出现Backtop组件。
可从以下3个方向进行分析:
指定target
属性,且一定要指向产生滚动条的组件。<el-backtop></el-backtop>
一定要写于最外层块级区域的第一行,不可写于代码末尾。- 要滚动的区域不能设置overflow: hidden,否则无法显示。如果你怀疑全局css设置了overflow: hidden,那么你可以在你要滚动的区域上添加样式overflow: auto进行覆盖。
以下为示例代码:
html
<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>