# JS Event 應用1

:::spoiler **event 應用1**
CSS

<style>
    div.parent_block{
        border: 1px solid black;
        display: flex;
    }
    div.left_block{
        border: 1px solid red;
        flex-basis: 100px;
    }
    div.left_block a.-on{
        background-color: black;
        color: white;
    }
    div.right_block{
        border: 1px solid blue;
        flex-grow: 1;
        height: 300px;
        overflow-y: auto;
        
        /* offsetTop 才會相對於這個元素 */
        position: relative;
    }
    div.each_block{
        border: 1px solid orange;
        
        height: 301px;
    }
</style>

HTML

<div class="parent_block">

    <div class="left_block">
        <ul class="list">
            <li><a href="#" id="link1" class="link -on">一</a></li>
            <li><a href="#" id="link2" class="link">二</a></li>
            <li><a href="#" id="link3" class="link">三</a></li>
        </ul>
    </div>
      
    <div class="right_block" id="scroll_block">
        <div class="each_block" data-id="link1">內容一</div>
        <div class="each_block" data-id="link2">內容二</div>
        <div class="each_block" data-id="link3">內容三</div>
    </div>
</div>

JS

<script>
    // scroll動作
    let scroll_block_el = document.getElementById("scroll_block");

    scroll_block_el.addEventListener("scroll", function(){
        // console.log("test");

        let blocks = this.querySelectorAll("div.each_block");
        // console.log(blocks);

        let left_links = this.closest("div.parent_block").querySelectorAll("a.link");
        // console.log(left_links);

        left_links.forEach(function(item, i){
            // console.log(i);
            item.classList.remove("-on");
        });

        let link;
        // console.log(blocks[0].offsetTop);
        // console.log(this.scrollTop);
        // console.log(blocks[0].offsetTop - this.scrollTop);
        for(let i = 0; i < blocks.length; i++) {
            let each_pos = blocks[i].offsetTop - this.scrollTop;
            // console.log(each_pos);
            if(each_pos <= 0 && each_pos >= -blocks[i].offsetHeight) {
                // console.log(i);
                let link_id = blocks[i].getAttribute("data-id");
                // console.log(link_id);
                link = document.getElementById(link_id);
            }
        }
        link.classList.add("-on");
    });

    // click動作
    let leftlinks = document.getElementsByClassName("link");
    // [a, a, a]
    for(let i = 0; i < leftlinks.length; i++) {
        leftlinks[i].addEventListener("click", function(event) {
            // console.log(event);
            event.preventDefault();                // 把a標籤的連結行為關掉

            let link_id = this.getAttribute("id");
            let each_block = document.querySelector("div.each_block[data-id=" + link_id +"]");
            // console.log(each_block);

            // scroll_block_el.scrollTop = each_block.offsetTop + 1;
            scroll_block_el.scrollTo({
                top: each_block.offsetTop + 1,
                behavior: "smooth"
            });
        });
    }
</script>

:::
* 說明：
* 運用 `div`的`data-id` 和 `a`的`id`，連動兩者
* 熟悉 `offsetTop`、`scrollTop`、`offsetHeight`
* 熟悉 `scrollTo`函式
* Demo：

###### tags: `frontend` `jsnote` [:arrow_right: Back to Front End Homepage :arrow_left:](/S-c0eqQmS16D8tcTx4ae1g)