dom元素滚动条滚动控制详解

最新推荐文章于 2024-02-21 09:51:31 发布

一拳小和尚LXY

最新推荐文章于 2024-02-21 09:51:31 发布

阅读量2.3k

点赞数

分类专栏：前端开发文章标签： html html5

本文链接：https://blog.csdn.net/qq_33718648/article/details/106340753

版权

本文详细介绍了DOM元素的滚动控制，包括scrollTop属性、scrollHeight、clientHeight的区别，getBoundingClientRect()方法，以及scrollTo()和scrollBy()方法的使用。通过实例演示如何实现滚动到底部、顶部以及到指定元素的功能，同时添加动画效果，增强用户体验。

摘要由CSDN通过智能技术生成

前言

不知道大家有没有遇到过这样的需求，在某个dom元素中添加新的子元素，然后要求如果新添加的新元素超出容器的范围，那么我们需要自动滚动到新添加的子元素的位置，如下图所示效果：

那么接下来我们一边学习一些dom元素滚动相关的知识点，一边实现一个上图的效果和一些其他滚动相关的功能。

需要了解的dom属性和方法

scrollTop、clientHeight和scrollHeight

scrollTop属性是一个描述容器元素内容的top值与容器元素(viewport)视口顶部top值之间的差值，即容器中内容向上滑动后超出容器视口的部分。可以通过修改此属性控制滚动状态。

clientHeight是描述容器高度的dom属性。

scrollHeight是描述容器内容高度的dom属性。

三个属性的关系如下图所示：

关系图

getBoundingClientRect()

此方法用来获取元素布局所需的一些几何属性，比如left、right、top、bottom、height、width等。

srollBy(x,y)

dom容器的scrollTo方法可以用来直接控制滚动条滚动指定的距离。当需要滚动到指定元素时，使用此方法比较方便。

srollTo(x,y)

dom容器的scrollTo方法可以用来直接控制滚动条滚动到指定位置。在控制滚动条滚动到顶部或者底部的时候使用此方法比较方便。

实现滚动控制

准备

我们先准备一个html

<!DOCTYPE html>
<html>
    <head>
       <title>滚动条设置详解</title>
       <style>
          #scroll_container{
    
              height: 500px;
              width: 500px;
              overflow-y: scroll;
              padding: 50px;
              box-sizing: border-box;
          }
          .scroll_item{
    
              height: 200px;
              width: 500px;
              margin-top: 20px;
              background-color: aquamarine;
              display: flex;
              align-items: center;
              justify-content: center;
          }
       </style>
    </head>
    <body>
       <div  id="scroll_container">
           <div  id="scroll_container">
               <div id="item1" class="scroll_item">
                   <span>1</span>
               </div>
               <div id="item2" class="scroll_item">
                    <span>2</span>
                </div>
                <div id="item3" class="scroll_item">
                    <span>3</span>
                </div>
                <div id="item4" class="scroll_item">
                    <span>4</span>
                </div>
                <div id="item5" class="scroll_item">
                    <span>5</span>
                </div> 
           </div>
           <button onclick="addItem()"