文档内容滚动，目录跟随高亮

最新推荐文章于 2023-12-08 17:59:50 发布
weixin_47863904
最新推荐文章于 2023-12-08 17:59:50 发布
阅读量162
点赞数
文章标签：前端 css
本文链接：https://blog.csdn.net/weixin_47863904/article/details/133684665
版权
<!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: 0;
            padding: 0;
        }
        .menu {
            float: left;
            overflow: hidden;
            margin-right: 20px;
            background-color: #000;
            height: 100vh;
            overflow-y: scroll;
            width: 250px;
        }
        .content {
            /* 设置内容区域的高度，以便滚动 */
            height: 400px;
            /* 设置内容区域为可滚动 */
            overflow-y: scroll;
            /* 设置平滑滚动 */
            scroll-behavior: smooth;
        }

        a {
            color: #fff;
            text-decoration: none;
            display: block;
            padding: 20px 30px;
        }

        .highlight {
            color: #1890ff;
        }

        .marLeft {
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="menu">
    </div>

    <div class="content">
        <div id="section1">
            <h1>内容一</h1>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium officia voluptate eum
            animi eaque inventore corporis, quasi qui commodi quam explicabo blanditiis ea reprehenderit id praesentium
            magnam nesciunt delectus excepturi?
            <div id="section1_1">
                <h2>内容1.1</h2>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor eaque quod debitis tempora hic? Iure
                eveniet, minus impedit consequuntur deleniti explicabo et id aut libero cum tempora, consequatur
                necessitatibus ipsa.
                Quam sit facilis labore accusamus aspernatur aliquid quaerat illum quis! Praesentium, tenetur eum enim
                voluptate officiis ratione aliquam ut ab quo animi eligendi placeat tempora ipsum nobis maiores quam
                minima?
                Ab quibusdam itaque vero, recusandae ratione in, architecto iusto ipsa enim molestias minima? Maiores
                officia quos quisquam obcaecati, libero atque! Deleniti quae ducimus maxime eius quis odio. Possimus, ad
                porro.
                Reprehenderit, quas qui pariatur molestias fugit doloremque fugiat asperiores labore est, quo
                accusantium. Ipsam illo error tenetur mollitia adipisci, reiciendis illum quae ducimus fugit? Quibusdam
                architecto alias eius laboriosam illum?
                Voluptate dolores laudantium esse iure laborum id cupiditate, ipsum voluptas odio ullam eveniet. Quod
                minus rerum dignissimos amet, dolores perspiciatis, cumque nisi officia similique aperiam consequatur
                labore magni! Ducimus, facere!
                Laudantium sequi perspiciatis qui necessitatibus corporis pariatur atque dignissimos voluptatibus facere
                ipsam distinctio, temporibus rerum, minus libero dolor modi voluptate explicabo. Molestias voluptates
                dolores consectetur ut dolore vel repellat dolor?
                Officiis quam nesciunt non ipsum fuga error porro pariatur iure. Quis ad magnam mollitia impedit
                suscipit eius temporibus aliquam ab sunt soluta accusantium laborum in, eum alias assumenda consequatur.
                Sunt!
                Nesciunt vel voluptatem cum quisquam, asperiores commodi autem reiciendis id, ducimus debitis provident
                aliquam nisi quae! Reprehenderit fugiat iure soluta odio sequi maiores ipsum at repellat exercitationem
                nam, nobis voluptas.
                Ratione fugiat magnam amet doloribus, dolore esse nihil, incidunt cum nemo veritatis temporibus quaerat
                ab sed rem accusantium magni totam nulla necessitatibus. Consectetur doloribus laborum, at magnam
                commodi ex dolorum.
                Voluptates reprehenderit voluptatem tenetur, unde sed iste, provident aut cum repellat dolores ea eius
                dolorum nihil asperiores laudantium nisi id minus necessitatibus repellendus laboriosam consectetur.
                Consequatur enim ex nobis tenetur.
                <div id='section1_1_1'>
                    <h3>内容1.1.1</h3>
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa ipsum repellat, incidunt quos iusto
                    dolore recusandae eveniet ab repellendus libero sequi! Laboriosam quaerat ut eveniet at numquam
                    sequi deserunt eius!
                </div>
            </div>
            <div id='section1_2'>
                <h2>内容1.2</h2>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, id, vero earum reiciendis fuga
                facilis cumque ut ratione dolore vel porro similique aliquid. Sequi, molestias eius adipisci facere ex
                ab.
            </div>

        </div>
        <div id="section2">
            <h1>内容二</h1>
            Lorem ipsum dolor sit amet consectetur.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis minus iste illo. Minima
            quis unde ut aliquid, magnam ratione quo. Consequatur facilis enim eveniet, harum labore blanditiis adipisci
            in earum, placeat atque ipsum cum, accusamus officia ex perspiciatis totam alias quisquam. Vitae dolor at
            commodi rem atque quam enim reiciendis est dignissimos quis cumque sed mollitia natus facilis consectetur,
            error suscipit dolores quaerat ut eos iure aliquid, sunt quas. Rem aspernatur nesciunt, fugiat assumenda
            sunt qui iure voluptatem exercitationem officia, asperiores voluptas consequatur quidem, incidunt ratione
            porro tempore quod alias aut neque ullam in minus delectus! Inventore dolor tempora ex?
        </div>
        <div id="section3">
            <h1>内容三</h1>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis minus iste illo. Minima
            quis unde ut aliquid, magnam ratione quo. Consequatur facilis enim eveniet, harum labore blanditiis adipisci
            in earum, placeat atque ipsum cum, accusamus officia ex perspiciatis totam alias quisquam. Vitae dolor at
            commodi rem atque quam enim reiciendis est dignissimos quis cumque sed mollitia natus facilis consectetur,
            error suscipit dolores quaerat ut eos iure aliquid, sunt quas. Rem aspernatur nesciunt, fugiat assumenda
            sunt qui iure voluptatem exercitationem officia, asperiores voluptas consequatur quidem, incidunt ratione
            porro tempore quod alias aut neque ullam in minus delectus! Inventore dolor tempora ex?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis minus iste illo. Minima
            quis unde ut aliquid, magnam ratione quo. Consequatur facilis enim eveniet, harum labore blanditiis adipisci
            in earum, placeat atque ipsum cum, accusamus officia ex perspiciatis totam alias quisquam. Vitae dolor at
            commodi rem atque quam enim reiciendis est dignissimos quis cumque sed mollitia natus facilis consectetur,
            error suscipit dolores quaerat ut eos iure aliquid, sunt quas. Rem aspernatur nesciunt, fugiat assumenda
            sunt qui iure voluptatem exercitationem officia, asperiores voluptas consequatur quidem, incidunt ratione
            porro tempore quod alias aut neque ullam in minus delectus! Inventore dolor tempora ex?
        </div>
        <div id="section4">
            <h1>内容四</h1>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis minus iste illo. Minima
            quis unde ut aliquid, magnam ratione quo. Consequatur facilis enim eveniet, harum labore blanditiis adipisci
            in earum, placeat atque ipsum cum, accusamus officia ex perspiciatis totam alias quisquam. Vitae dolor at
            commodi rem atque quam enim reiciendis est dignissimos quis cumque sed mollitia natus facilis consectetur,
            error suscipit dolores quaerat ut eos iure aliquid, sunt quas. Rem aspernatur nesciunt, fugiat assumenda
            sunt qui iure voluptatem exercitationem officia, asperiores voluptas consequatur quidem, incidunt ratione
            porro tempore quod alias aut neque ullam in minus delectus! Inventore dolor tempora ex?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis minus iste illo. Minima
            quis unde ut aliquid, magnam ratione quo. Consequatur facilis enim eveniet, harum labore blanditiis adipisci
            in earum, placeat atque ipsum cum, accusamus officia ex perspiciatis totam alias quisquam. Vitae dolor at
            commodi rem atque quam enim reiciendis est dignissimos quis cumque sed mollitia natus facilis consectetur,
            error suscipit dolores quaerat ut eos iure aliquid, sunt quas. Rem aspernatur nesciunt, fugiat assumenda
            sunt qui iure voluptatem exercitationem officia, asperiores voluptas consequatur quidem, incidunt ratione
            porro tempore quod alias aut neque ullam in minus delectus! Inventore dolor tempora ex?
        </div>
        <div id="section5">
            <h1>内容五</h1>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis minus iste illo. Minima
            quis unde ut aliquid, magnam ratione quo. Consequatur facilis enim eveniet, harum labore blanditiis adipisci
            in earum, placeat atque ipsum cum, accusamus officia ex perspiciatis totam alias quisquam. Vitae dolor at
            commodi rem atque quam enim reiciendis est dignissimos quis cumque sed mollitia natus facilis consectetur,
            error suscipit dolores quaerat ut eos iure aliquid, sunt quas. Rem aspernatur nesciunt, fugiat assumenda
            sunt qui iure voluptatem exercitationem officia, asperiores voluptas consequatur quidem, incidunt ratione
            porro tempore quod alias aut neque ullam in minus delectus! Inventore dolor tempora ex?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis minus iste illo. Minima
            quis unde ut aliquid, magnam ratione quo. Consequatur facilis enim eveniet, harum labore blanditiis adipisci
            in earum, placeat atque ipsum cum, accusamus officia ex perspiciatis totam alias quisquam. Vitae dolor at
            commodi rem atque quam enim reiciendis est dignissimos quis cumque sed mollitia natus facilis consectetur,
            error suscipit dolores quaerat ut eos iure aliquid, sunt quas. Rem aspernatur nesciunt, fugiat assumenda
            sunt qui iure voluptatem exercitationem officia, asperiores voluptas consequatur quidem, incidunt ratione
            porro tempore quod alias aut neque ullam in minus delectus! Inventore dolor tempora ex?
        </div>
    </div>
    <script>
       
        const tocList = [
            {
                href: '#section1',
                name: '目录1',
                children: [
                    {
                        href: '#section1_1',
                        name: '目录1.1',
                        children: [
                            {
                                href: '#section1_1_1',
                                name: '目录1.1.1',
                            }
                        ]
                    },
                    {
                        href: '#section1_2',
                        name: '目录1.2',
                    }
                ]
            },
            {
                href: '#section2',
                name: '目录2',
            },
            {
                href: '#section3',
                name: '目录3',
            },
            {
                href: '#section4',
                name: '目录4',
            },
            {
                href: '#section5',
                name: '目录5',
            },

        ]

        const toc = getDirectory(tocList)
        const menu = document.querySelector('.menu')
        // 生成目录
        menu.innerHTML = toc



        // 找到目录每个节点在右边对应的元素

        const titles=[]
        const links = document.querySelectorAll('.menu a[href^="#"]')
            for(const link of links){
              const url = new URL(link.href)
              const dom =  document.querySelector(url.hash)
              if(dom){
                titles.push(dom)
              }
        }
        highlight(location.hash)
        menu.addEventListener('click', (e) => {
            highlight(e.target)
        })


        function highlight(id) {
            document.querySelectorAll('a.highlight').forEach(a =>
                a.classList.remove('highlight')
            );
            // 如果传递的是一个元素
            if (id instanceof HTMLElement) {
                id.classList.add('highlight')
                return
            }
            if (id.startsWith('#')) {
                id = id.substring(1)
            }
            document.querySelector(`a[href="#${id}"]`).classList.add('highlight')
        }

        /*
        *获取目录
        */
        function getDirectory(tocList) {
            let innerhtml = ''
            tocList.map(i => {
                innerhtml = innerhtml + `<div>
                        <a href=${i.href}>${i.name}</a>
                    </div>`
                if (i.children && i.children.length) {
                    innerhtml = innerhtml + `<div class="marLeft">${getDirectory(i.children)}</div>`
                }

            })
            return innerhtml
        }


        function debounce(fn, delay) {
            let timerId = null
            return (...args) => {
                clearTimeout(timerId)
                timerId = setTimeout(()=>fn(...args),delay)

            }
        }
        const handScroll=debounce(()=>{
            for(let i=0;i<titles.length;i++){
               // 获取锚点对应内容元素的位置
                const rect = titles[i].getBoundingClientRect()
                const nextRect  = titles[i+1].getBoundingClientRect()
                if((rect.top>=0 && rect.top<150)||(rect.top<0 && nextRect.top>150)){
                    highlight(`#${titles[i].id}`)
                    break;
                }
            }
        },100)
        const contentele=document.querySelector('.content')
        contentele.addEventListener('scroll',handScroll)
      
    </script>

</body>


</html>