vue3+ts根据高度改变元素的透明度

边看代码边解释吧：

import type {ComponentPublicInstance} from 'vue';
import { defineComponent, onMounted, ref} from 'vue';

export default defineComponent({
  setup() {
    // 定义ref，这样可以直接获取页面中的组件
    // 组件类型可以从vue中引入
    // scrollViewRef 的组件是 ElementPlus 定义的，这里type直接偷懒了
    const scrollViewRef = ref<null | {wrap : HTMLElement}>(null);
    const goBackBarRef = ref<null | ComponentPublicInstance<HTMLElement>>(null);
    onMounted(() => {
      if (scrollViewRef.value) {
       // 监听滚动事件
        scrollViewRef.value.wrap.addEventListener('scroll', () => {
          if (goBackBarRef.value) {
            // getBoundingClientRect().top 使用这个函数可以获取页面的高度
            const top = goBackBarRef.value.$el.getBoundingClientRect().top;
            // 最后把透明度按照一定的公式改掉就可以了
            goBackBarRef.value.$el.style.opacity = String(top / 32 + 0.5);
          }
        });
      }
    });

    return {scrollViewRef, goBackBarRef};
  },
});

优化

查看scroll事情 mdn 的时候，发现可以优化一下，大家可以直接参考下面的链接

Scroll 事件节流 (opens new window)

代码：

// 参见: http://www.html5rocks.com/en/tutorials/speed/animations/

let last_known_scroll_position = 0;
let ticking = false;

function doSomething(scroll_pos) {
  // 根据滚动位置做的事
}

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });

    ticking = true;
  }
});