js 导航滚动滚动条原理讲解

最新推荐文章于 2022-08-21 15:20:18 发布

29号同学

最新推荐文章于 2022-08-21 15:20:18 发布

阅读量1.3k

点赞数 2

文章标签： js html scroll 滚动条

本文链接：https://blog.youkuaiyun.com/ZYD45/article/details/109223108

版权

本文介绍了如何在网页中实现类似Word导航窗口的效果，当点击左侧导航时，右侧内容区域相应滚动到对应标题。讲解了滚动条的原理，包括可视区域、内容高度和滚动条长度的关系，并提供了一个简单的解决方案，通过动态计算和设置min-height来实现目标元素滚动到顶部的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在制作导航时，希望左边的导航和右侧的内容区域可以联动显示，例如：左侧导航点到某个标题后，右侧的内容区域自动将此标题置顶

像Word中的导航窗口：

点击导航中的“文章2”时，右侧的内容区，自动将“文章2”内容滚动到置顶位置进行显示。

但是再点击“文章3”“文章4”时，右侧的内容区域就无法将其内容，滚动到置顶位置了。

滚动条展示原理图：

从上图可知：

可视区域高度/内容高度 = 滚动条长度/滚动条总长；

可滚动距离=内容高度-可视区域高度；

而从图又可知：滚动条总长 = 可视区域高度。

假设内容高度=200，可视区域长度 =100，,当有个【目标元素】距离顶部125，当我们想让其滚动到顶部时，就会出现如下情况：

可滚动距离=200-100，而目标元素在125的位置，所以【目标元素】也就无法滚动到顶端。

而想要实现滚动到顶部，就要使其目标滚动距离<可滚动距离

显而易见，最简单的方法就是补充【内容区域】的高度。而需要补充的长度=目标距离-可滚动距离。

在实际处理中，我们可以借助一个“补充高度的元素”,利用calc动态计算高度，然后通过设置min-height 来实现相关的滚动

min-height:calc(100% - 底部元素高度);

一个简单的示例：

这里footer就是用来补充高度的

<html lang="en">

<head>
    <style>
        div {
            height: 200px;
            border: 1px solid;
        }
        #c{
            height:150px;
        }

        .container {
            height: 300px;
            overflow: scroll;
        }
        .footer{
            /* 这里的150px是 div C的高度 
            100%是父级元素的高度            
            */
            min-height: calc(100% - 150px);
        }
    </style>
</head>
<body>
    <a href="#a">文章A</a>
    <a href="#b">文章B</a>
    <a href="#c">文章C</a>
    <div class="container">
        <div id="a">
            <h2>文章A</h2>
        </div>
        <div id="b">
            <h2>文章B</h2>
        </div>
        <div id="c">
            <h2>文章C</h2>
        </div>
        <footer class="footer"></footer>
    </div>
</body>

</html>