检测元素是否在页面内展示

// 解决当wtListScrollColumn元素隐藏且此时更改分辨率后，再次显示wtListScrollColumn时布局没有更新的问题
const elementToWatch = document.getElementsByClassName("wtListScrollColumn");
const intersectionObserver = new IntersectionObserver((entries) => {
	entries.forEach((entry) => {
    // 页面展示
		if (entry.isIntersecting) {
			this.SetDynamicLayout();
		}
    // 页面隐藏
    else{

    }
	});
});
for (let i = 0; i < elementToWatch.length; i++) {
	intersectionObserver.observe(elementToWatch[i]);
}

//  设置动态布局
 SetDynamicLayout() {
      // 获取屏幕宽度
      // 屏幕宽度卡片取余
      // 取余后看一行能放下几个卡片
      // 将余数平均分配到每个卡片
      // 如果余数平分后不会造成拥挤到下一行
      // 余数平分后拥挤到下一行
      // 给卡片设置最后宽度
      let containerWidth;
      this.$nextTick(() => {
        /*
       如果wtListScrollColumn元素在页面上没有显示，就使用自己传入的listWidth值，
       使用场景：业务代码内，使用v-show根据接口返回的数据 控制wtListScrollColumn元素的显示隐藏
      */
        if (this.$el.querySelector('.wtListScrollColumn').offsetWidth === 0) {
          containerWidth = this.listWidth + this.about;
        }
        // 其他场景
        else {
          containerWidth = this.$el.querySelector('.wtListScrollColumn').offsetWidth + this.about;
        }
        console.log(containerWidth, 'containerWidth');
        let yushu = containerWidth % (this.cardMinWidth + this.about);
        let geshu = (containerWidth - yushu) / (this.cardMinWidth + this.about);
        let pingjun = (yushu / geshu).toFixed(3);
        this.cardWidth = this.cardMinWidth + parseFloat(pingjun);
        // console.log(this.cardWidth, 'this.cardWidth');
        // 将当前卡片宽度传递给父组件，用于根据UI要求完成其他元素布局
        this.$emit('cardWidthBoundary', this.cardWidth)
      })
    },