CocoClass_home/src/complates/ProcessFlow.js

import React, { useEffect, useState } from 'react';
// import { Flex } from 'antd';
import '../asstes/css/ProcessFlow.css'
import img1 from '../asstes/img/cocopi1.png'
import img2 from '../asstes/img/cocopi2.png'
import img3 from '../asstes/img/cocopi3.png'
import img4 from '../asstes/img/cocopi4.png'


function ProcessFlow() {
    const [scrollValue, setscrollValue] = useState(0)
    const handleScroll = e => {
        let val = parseInt(e.target.scrollTop/700)
        setscrollValue(val)
    }
    useEffect(() => {
        document.getElementById("anchor_right").addEventListener('scroll', handleScroll);

        return () => {
            document.getElementById("anchor_right").removeEventListener('scroll', handleScroll);
        };
    }, []);

    const ScrollVal = (val)=>{
        setscrollValue(val)
        document.getElementById("anchor_right").scrollTop = val*700
    }
    return (
        <div className='ProcessFlow'>
            <h1>產品特點</h1>
            <div className='anchor'>
                <div className='anchor_flex'>
                    <div className='anchor_left'>
                        <div onClick={()=>ScrollVal(0)} className={scrollValue === 0 && "anchor_left_div"}>
                            <span>高性價比</span><br />
                            <span>Economical Choice</span>
                        </div>
                        <div onClick={()=>ScrollVal(1)} className={scrollValue === 1 && "anchor_left_div"}>
                            <span>高集成度</span><br />
                            <span>Highly Integrated</span>
                        </div>
                        <div onClick={()=>ScrollVal(2)} className={scrollValue === 2 && "anchor_left_div"}>
                            <span>易用性</span><br />
                            <span>Usability</span>
                        </div>
                        <div onClick={()=>ScrollVal(3)} className={scrollValue === 3 && "anchor_left_div"}>
                            <span>開放性</span><br />
                            <span>Openness</span>
                        </div>
                    </div>
                    <div className='anchor_right' id='anchor_right'>
                        <div id='aaa' style={{ width: "100%" }}>
                            <img src={img1} alt='' />
                        </div>
                        <div id='bbb' style={{ width: "100%" }}>
                            <img src={img2} alt='' />
                        </div>
                        <div id='ccc' style={{ width: "100%" }}>
                            <img src={img3} alt='' />
                        </div>
                        <div id='ddd' style={{ width: "100%" }}>
                            <img src={img4} alt='' />
                        </div>

                    </div>
                </div>
            </div>
        </div>
    )
}

export default ProcessFlow