vue3+ts监听滚动条变化，侧边栏高度居中不变

sirenaki

已于 2022-12-09 11:21:04 修改

阅读量1.8k

点赞数

文章标签：前端

于 2022-11-25 16:10:31 首次发布

本文链接：https://blog.csdn.net/m0_69688393/article/details/128039806

版权

1、动态绑定样式

<div class="left" :style="{ top: topHeight + 'px' }"></div>

css样式：

.left {
  width: 72px;
  height: 402px;
  background-color: #ffffff;
  border-radius: 5px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-top: 10px;
  position: fixed;
  left: 12%;
  // top: 38%;
  }

2、监听滚动条高度

<script setup lang="ts">
// 默认侧边栏高度
const topHeight = ref(402);//侧边栏初始高度
onMounted(() => {
  window.addEventListener("scroll", scrollTop, true);
});
const scrollTop = () => {
  let scroll = document.documentElement.scrollTop || document.body.scrollTop;
  console.log("网页正文全文高",document.body.scrollHeight);
  topHeight.value = 402 - Math.floor(scroll / Math.floor(document.body.scrollHeight/173));
}
</script>