vue网页随高度变化相应图片放大

script代码

 data() {

        return {

            toShow5: false,

            scale_3: '0'

        };

    },

mounted() {
        window.addEventListener('scroll', this.handleScrollx, true);
        window.addEventListener('scroll', this.scaleScroll, true);
    },
    methods: {
    // 当网页滚动到一定高度文字显现的动画效果
        handleScrollx() {
            const currentHeight = window.pageYOffset;
            // TeenagerMode部分
              if (!this.toShow1 && currentHeight >= 100) {
                this.toShow1 = true;
            }
            // OnlineHabits部分
            if (!this.toShow2 && currentHeight >= 660) {
                this.toShow2 = true;
            }
            // NightOnline部分
            if (!this.toShow3 && currentHeight >= 1750) {
                this.toShow3 = true;
            }
            // FamilyCare部分
            if (!this.toShow4 && currentHeight >= 3300) {
                this.toShow4 = true;
            }
            // InternetSecurity部分
            if (!this.toShow5 && currentHeight >= 3800) {
                this.toShow5 = true;
            }
        },
    // 当网页滚动到一定高度当前图片放大动画效果
        scaleScroll() {
            const currentHeight = window.pageYOffset;
            console.log(currentHeight)
            // NightOnline部分
            if (1900<=currentHeight && currentHeight<3000) {
                this.scale_1="1"
            }else{
                this.scale_1="0"
            }
            // FamilyCare部分
            if (3000<=currentHeight&& currentHeight<=4000 ) {
                this.scale_2="2"
                console.log(this.scale_2)
            }else{
                this.scale_2="0"
                console.log(this.scale_2)

            }
            // InternetSecurity部分
            if (4000<currentHeight) {
                this.scale_3="3"
            }else{
                this.scale_3="0"

            }
        }
        
    }

　　css代码

 .scale-1 {
        transform: scale(1.05);
        transition: all 0.5s;
    }
    .scale-0 {
        transform: scale(1);
        transition: all 0.5s;
    }

html代码

 <div class="InternetSecurity">
        <div class="main" :class="scale_3 == '3' ? 'scale-1' : 'scale-0'">
            <div class="title" v-show="toShow5">WiFi密码不泄露 重要信息不丢失</div>
            <div class="txt">
                <div class="item">
                    <div class="text1">深度防蹭网</div>
                    <div class="text2">8%的家庭网络隐患来源于WiFi密码泄露。360防</div>
                    <div class="text2">蹭网防火墙可有效识别和阻断蹭网工具，防止WiFi</div>
                    <div class="text2">密码被各类分享软件分享。当陌生人尝试连接你家</div>
                    <div class="text2">网络时，你会立刻收到通知，并进行一键拉黑。</div>
                </div>
                <div class="item">
                    <div class="text1">访客专用网络</div>
                    <div class="text2">即时生成独立WiFi，朋友做客可免密码登</div>
                    <div class="text2">录，联网更方便，告别后续改密码的麻烦。</div>
                    <div class="text2">隔离临时外部设备，有效防止隐私泄露。</div>
                </div>
            </div>
        </div>
    </div>