运行效果有问题

# 具体遇到的问题
Chrome运行效果有问题
# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .content-part {
            width: 676px;
            background-color: gray;
            margin: 0px auto;
            margin-bottom: 50px;
            font-size: 60px;
        }
        ul {
            width: 100px;
            height: 500px;
            background-color: orange;
            position: fixed;
            right: 10px;
            top: 50%;
            margin-top: -250px;

        }
        ul li {
            width: 100px;
            height: 90px;
            margin-bottom: 10px;
            /* font-size: 30px; */
            cursor: pointer;
            text-align: center;
            list-style: none;
            line-height: 90px;
        }
        ul li.current {
            background-color: purple;
            color: aliceblue;
        }
    </style>
</head>
<body>
    <ul id="list">
        <li data-n="科技" class="current">科技</li>
        <li data-n="体育">体育</li>
        <li data-n="新闻">新闻</li>
        <li data-n="娱乐">娱乐</li>
        <li data-n="视频">视频</li>
    </ul>
    <section class="content-part" style="height: 674px;" data-n="科技">
        科技栏目
    </section>
    <section class="content-part" style="height: 567px;" data-n="体育">
        体育栏目
    </section>
    <section class="content-part" style="height: 739px;" data-n="新闻">
        新闻栏目
    </section>
    <section class="content-part" style="height: 274px;" data-n="娱乐">
        娱乐栏目
    </section>
    <section class="content-part" style="height: 1000px;" data-n="视频">
        视频栏目
    </section>

    <script>
        //获取列表的节点
        var list = document.getElementById('list');
        var contents = document.querySelectorAll('.content-part');
        var lis = document.querySelectorAll('#list li')

        //事件委托
        list.onclick = function(e) {
            if(e.target.tagName.toLowerCase()=='li') {
                //获取列表项中的data-n的值
                var n = e.target.getAttribute('data-n');
                //寻找data-n值相同的栏目
                var contentPart = document.querySelector('.content-part[data-n='+n+']');
                //将此栏目的offsetTop值传给document.documentElement.scrollTop
                document.documentElement.scrollTop = contentPart.offsetTop;
            }
        }

        //第一步，获取所有栏目的offsetTop并推入一个数组
        //第二部，添加浏览器卷动事件，并将卷动的距离与数组中固定好用来测量的距离进行比对，判断在哪一个楼层，然后对该楼层的导航条进行交互设置
        var offsetArr = [];
        //节流锁
        var nowfloor = -1;

        for(var i=0;i<contents.length;i++) {
            offsetArr.push(contents[i].offsetTop);
        }
        offsetArr.push(Infinity);
        // console.log(offsetArr);

        window.onscroll = function() {
            var scroll = document.documentElement.scrollTop;
            for(var i=0;i<offsetArr.length;i++) {
                if(scroll>=offsetArr[i]&&scroll<offsetArr[i+1]) {
                    break;
                }
            }
            if(nowfloor!=i) {
                console.log(i);
                nowfloor = i;

                //循环排他法进行重点楼层设置
                for(var j=0;j<lis.length;j++) {
                    if(j==i) {
                        lis[j].className = 'current';
                    }else {
                        lis[j].className = '';
                    }
                }
            }
        }
    </script>
</body>
</html>