一次分清clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop概念：
clientHeight：可视的，看得见的部分，content+padding；
offsetHeight：在clientHeight基础上，添加“”边框“”，即content+padding+margin；
scrollTop：超过clientHeight“顶部界线”的部分，即看不见的、已经 滚动出去 的部分；
2024年11月17日
一次分清clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop概念：
clientHeight：可视的，看得见的部分，content+padding；
offsetHeight：在clientHeight基础上，添加“”边框“”，即content+padding+margin；
scrollTop：超过clientHeight“顶部界线”的部分，即看不见的、已经 滚动出去 的部分；
2024年11月17日
两句css代码实现全屏滚动效果
<body>
<div class="container">
<section>
<h3>第一屏内容</h3>
<p>
在父容器上使用scroll-snap-type 属性 <br>
第一个参数y 是y轴捕捉位置 <br>
mandatory 超过距离则自动滚动到下一个容器 <br>
scroll-snap-type:y mandatory <br>
在需要滚动的容器上使用 scroll-snap-align 属性 <br>
start 开始部分 end 结束部分 center 中间部分 <br>
scroll-snap-align:start; <br>
</p>
</section>
<section>
<h3>第二屏内容</h3>
<p>
在父容器上使用scroll-snap-type 属性 <br>
第一个参数y 是y轴捕捉位置 <br>
mandatory 超过距离则自动滚动到下一个容器 <br>
scroll-snap-type :y mandatory <br>
在需要滚动的容器上使用 scroll-snap-align 属性 <br>
start 开始部分 end 结束部分 center 中间部分 <br>
scroll-snap-align:start; <br>
</p>
</section>
<section>
<h3>第三屏内容</h3>
<p>
在父容器上使用scroll-snap-type 属性 <br>
第一个参数y 是y轴捕捉位置 <br>
mandatory 超过距离则自动滚动到下一个容器 <br>
scroll-snap-type :y mandatory <br>
在需要滚动的容器上使用 scroll-snap-align 属性 <br>
start 开始部分 end 结束部分 center 中间部分 <br>
scroll-snap-align:start; <br>
</p>
</section>
</div>
</body>2024年11月17日
在日常开发中，我们经常需要在用户浏览页面时进行一些动态操作，比如实现无限滚动加载更多内容、调整布局、或触发动画效果。为了实现这些功能，准确获取整个网页文档的高度是关键的一步。今天，我们就结合一个实际业务场景，来看一下如何用JavaScript获取整个文档的高度。
2024年11月17日
在前端开发领域，"高度坍塌"通常是指网页布局中由于元素高度计算不准确或响应式设计处理不当导致的视觉效果混乱或内容显示不全的现象。这类问题严重影响用户体验，因此，深入分析高度坍塌的原因并提出有效的解决方案至关重要。本文将从前端开发的角度出发，详细探讨高度坍塌的常见成因，并结合前端技术与最佳实践，提出一套全面的预防与修复策略。
2024年11月17日
一次分清clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop概念：
clientHeight：可视的，看得见的部分，content+padding；
offsetHeight：在clientHeight基础上，添加“”边框“”，即content+padding+margin；
scrollTop：超过clientHeight“顶部界线”的部分，即看不见的、已经 滚动出去 的部分；
2024年11月17日
可以使用`ref`和`onMounted`来获取滚动高度。
首先，在模板中给需要获取滚动高度的元素加上`ref`属性，例如：
<template>
<div ref="scrollWrapper" class="scroll-wrapper">
<!-- 内容 -->
</div>
</template>2024年11月17日
前端发展过程中有许多性能优化的操作，比如防抖、节流和图片懒加载等。在这里我们首先聊聊图片懒加载操作。
在最近的618中，我们会经常逛像淘宝和京东等购物平台。那你觉得在淘宝页面中的图片资源是打开页面时就一次性全部加载完了呢，还是在你滚轮滚动到的区域才加载图片呢。
一次性全部加载会导致加载时间长、网络资源消耗大、内存占用率高和发出大量图片请求给服务器带来的巨大压力。
2024年11月17日
本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。
文档坐标和视口坐标：
元素的位置是以像素来度量的，向右代表x坐标的增加，向下代表y坐标的增加；但是，有两个不同的点作为坐标系的原点：元素的x和y坐标可以相对于文档的左上角或者相对于视口的左上角，也就是对于一个元素来说，会有两种坐标：文档坐标和视口坐标；视口坐标也被称为窗口坐标；
2024年11月17日
在CSS中，height: 100vh; 是一个用于设置元素高度的属性值。这里，vh 是一个相对单位，它代表“视口高度”（Viewport Height）的百分比。具体来说，1vh 等于视口高度的 1%。
当你为一个元素设置 height: 100vh; 时，你实际上是在告诉浏览器，你希望这个元素的高度占据整个视口（通常是浏览器窗口或包含它的框架）的高度。
以下是一个设置了100vh的例子，看到登录注册离顶部到该100高度