即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动 local 背景相对于元素的内容固定。...参数tz是一个 length 值，不能是百分比值。 正值会使元素沿Z轴正方向上移动，负值会使元素沿Z轴负方向上移动。...它定义了 观察者（即浏览器窗口）与 3D 元素之间的距离，从而影响到元素的透视效果。 透视效果是指当元素在 3D 空间中移动时，根据其与观察者的距离，产生的远近感和大小变化。...在视差滚动中，"向内移动"和"向外移动"是相对于观察者（即浏览器窗口）的视角来说的。 当一个层的 translateZ 值为负时，它会向内移动，也就是朝向观察者的方向。...结果是，当地址栏可见时，屏幕的底部部分将被切断，从而破坏了100vh的初衷。 如下所示： 当地址栏可见时，由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏， 因此屏幕底部被切断。
如果定义多个属性，当left、right、冲突时以left为准，当top、bottom冲突时以top为准，如果一个也不指定则元素扔按普通文档流布局，但他自己不再占据空间，后续元素上移与其重叠。...绝对定位元素定位后相对祖先元素的位置不在变化，若页面内容较多拖动页面滚动时，定位元素会随页面一起滚动。 绝对定位元素重叠覆盖其他元素时可用z-index属性设置他们的叠放次序。 ? 2....(2) 相对定位的元素移动后保持原外观样式大小，移动定位后不会占据新空间会覆盖新位置原有元素，原位置空间被保留，其他元素相对他原来的位置不变。...right正值：右边向内—向左移动，负值：右边向外—向右。 top正值：上边向内—向下移动，负值：上边向外—向上。 bottom正值：下边向内—向上移动，负值：下边向外—向下。 3....固定定位与绝对定位absolute的区别是定位的元素无论父元素是否定位都会直接在浏览器窗口中定位，不会随滚动条拖动页面而滚动，固定定位用left、right、top、bottom指定浏览器左、右、上、下各边向中心的偏移量作为定位元素外边距位置
判断滚动条是否滚动到底 垂直滚动条 scrollHeight - scrollTop = clientHeight 1 复制 ---- # 文档的加载 浏览器在加载一个页面时，是按照自上向下的顺序加载的...（Bubble） 事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。...当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove 当鼠标松开时，被拖拽元素固定在当前位置 onmouseup 提取一个专门用来设置拖拽的函数...可以获取地址栏信息，或者操作浏览器跳转页面 如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径） 如果直接将location属性修改为一个完整的路径，或相对路径 则我们页面会自动跳转到该路径...，其他的和JS语法一致 JSON分类： 对象 {} 数组 [] JSON中允许的值： 字符串 数值 布尔值 null 对象 数组 将JSON字符串转换为JS中的对象 在JS中，为我们提供了一个工具类
这是掘金网页版的头部，当滚动条向下滑动时，主header会隐藏，次级header会吸在页面顶部。...、滚动状态（到顶部/到底部）和是否在滚动 其中，函数返回的 directions 是一个 reactive 对象，我们对其进行监听，当该变量发生变化时，说明滚动方向发生了改变。...} else if (bottom) { isHidden.value = true } 是关键，当向上滚动时，显示header；向下滚动时，隐藏header。...甚至y值能到负值 查看示例 这里还有一个问题，只检测了滚动到顶部，而没有检测滚动到底部。这是因为我没想到什么很好的方法去检测。...但是在safari里可能不一致，在safari中，当地址栏收缩时，上文的公式成立；但是当地址栏是展开状态时，两者会一个相差地址栏的高度。而地址栏是否展开我没找到判断的方法。
，并返回数组新的长度 语法：数组.push(元素1,元素2,元素N)pop() pop() 用来删除数组的最后一个元素，并返回被删除的元素 unshift() 向数组的开头添加一个或多个元素，并返回数组的新的长度...使用该属性可以获取或设置元素内部的HTML代码 事件 可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存...是否在捕获阶段触发事件，需要一个布尔值，一般都传false 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行...* 当鼠标滚轮向下滚动时，box1变长 * 当滚轮向上滚动时，box1变短 *...，同时window也是网页中的全局对象 Navigator 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器 Location 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息
API部分 Model部分：是CSSOM的本体，通常用HTML标签style或者link标签即可创建 构建CSSOM树是依赖于DOM树的，在构建CSSOM树时，对于任何一个元素的最终样式，浏览器都会从该节点的最上层节点开始...View部分：分成三个部分：窗口部分、滚动部分和布局部分 窗口的api：操作浏览器窗口的位置、尺寸等，包括；moveTo（x，y)：窗口移动到屏幕的特定坐标；moveBy（x，y）：窗口移动特定距离；resizeTo...滚动的api:分为视口滚动和元素滚动，为元素添加监听滚动的事件，scrollX:表示X方向上的当前滚动距离，scrollY：表示Y方向上的当前滚动距离；scrollTop：表示Y方向上的当前滚动距离。...订阅模式：发布者内容变化，通过中间层接受并通知订阅者，订阅者收到通知，更新对应的属性以及其他模式。...，其他对象的该属性也变了2、创建子类实例时，无法向父类构造函数传递参数 构造函数继承：在子类中调用父类.call()。
# 3.3 fixed 属性值 fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。...div { position: fixed; top: 0; } 1 2 3 4 复制 上面代码中，div元素始终在视口顶部，不随网页滚动而变化。...因此，它能够形成"动态固定"的效果。比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）。 页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）。...等到页面重新向上滚动回到原位，工具栏也会回到默认位置。...除了上面提到"动态固定"效果，这里再介绍两个。 # 5.1 堆叠效果 堆叠效果（stacking）指的是页面滚动时，下方的元素覆盖上方的元素。
，确保在两个方向上都能获得流畅而精确的滚动体验。...它允许你将样式、布局和绘制重新计算的范围限制在DOM的特定部分，提高性能并最小化不必要的渲染工作。 使用 contain ，我们可以指示一个元素及其内容尽可能独立于文档树的其他部分。...7. clip-path clip-path 属性允许我们创建独特的形状并对元素应用裁剪。虽然通常与图像一起使用，但它也可以与其他元素创造性地结合使用，例如段落，以仅显示内容的一部分。...设置元素的宽高比在处理响应式设计或保持特定视觉比例时非常有用。例如，可能希望创建一个容器，始终保持16:9的宽高比，确保图像无论其原始尺寸如何都能正确显示。...总结 将这些较少为人所知的CSS属性融入到你的项目中，不仅会扩展你的知识，还会为你提供额外的工具来创建出色的设计并优化性能。 记住，在使用这些属性时，考虑浏览器支持和潜在的跨浏览器问题是至关重要的。
前言 通过阅读本文,你可以通过css 中overcroll-behavior属性值的设置,处理浏览器溢出滚动,以及禁用移动设备上刷新,下拉滚动时的发光和橡皮圈回弹效果,当然也可以看到css中 Houndini...(橡皮筋效果),使用overscroll-behavior-y: none: 完整Demo 总结 CSS overscroll-behavior属性允许开发人员在达到内容的顶部/底部时覆盖浏览器的默认溢出滚动行为...使用该案例包括禁用移动设备上的“拉动到刷新”功能，消除过度滚动发光和橡皮筋效果，并防止页面内容在模态/叠加层下滚动 背景 滚动边界和滚动链接 滚动是与页面交互的最基本的方式之一，但是由于浏览器的诡异默认行为...最终的结果是当用户到达聊天记录的顶部/底部时，主页面保持放置状态。在聊天框中开始的滚动不会传播出去 ?...(聊天窗口下的内容也会滚动) 页面重叠场景 下面”方案的另一个变动就是是当你看到内容在固定位置叠加后滚动时。一个死的样品overscroll行为是为了！浏览器试图帮助，但它最终使网站看起来越来越多。
-webkit-overflow-scrolling: touch 解释：-webkit-overflow-scrolling属性用于控制元素在移动设备上是否使用滚动回弹效果，其中touch表示使用具有回弹效果的滚动..., 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。...在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式...，则子元素的字体大小为 16px X 2em = 32px 当em作为其他属性单位时，代表自身字体大小的倍数 例如：一个元素的font-size: 16px 如果该元素的line-height: 2em...自定义滚动条的样式 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条
+ padding + border + margin 对于其他元素，在没有滚动条的情况下： element.scrollWidth = element.clientWidth element.scrollHeight...element.scrollTop/element.scrollLeft： 返回元素在垂直方向或者水平方向上已滚动的距离。...image.png 例如，上图中的红框是固定的屏幕可视区，而网页视为可以上下拖动的文档，当滚动条下拉的时候，实际上是文档向上拖动，而这个拖动的距离就是 element.scrollTop 2.4 返回对象系列...如下图： image.png 可以看出，假如元素在页面滚动条的拖动下向上移动，则元素的 top 会是负值。...scrollLeft()/scrollTop()： 水平方向上或者垂直方向上，滑块相对于整个滚动条的位置。对于某个元素，滑块处于初始位置或者无滚动条时，该方法返回 0。
MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果。 auto：使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...touch：使用具有回弹效果的滚动，当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比，同时也会创建一个新的堆栈上下文。 3....document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight - 1, 0)) }, 200) } } 注意：固定定位的元素在...Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域，但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。...使用vue router跳转到第二个页面后在分享时，分享设置失败。如下图中的第二个分享就是有问题的，而第一个分享是正常的。 解决办法： 1.
absolute：绝对定位，元素框不再占有文档流中的位置，将相对于页面进行绝对定位。 fixed：固定定位，元素框不再占有文档流中的位置，将相对于浏览器窗口进行绝对定位，滚动页面时元素位置不变。...fixed 定位使元素脱离文档流，相对于浏览器窗口进行定位，滚动页面时元素保持固定。 sticky 定位则让元素在滚动时可以在某个阈值处“粘住”，直到滚动超过设定的阈值时变为 fixed 定位。...2.几种常用的定位方式 在示例工程的 pages 文件夹下新建一个名为 positionDemo 的页面文件，并编写本节的测试代码。...2.4 fixed 定位 fixed 定位的元素相对于浏览器窗口进行定位，不会随着页面的滚动而移动。与 absolute 定位不同，fixed 定位的元素不会占据文档流中的空间。...absolute 定位：元素脱离文档流，定位相对于最近的已定位父元素（如 relative、absolute 或 fixed）。 fixed 定位：元素固定在浏览器窗口，滚动页面时不受影响。
无论页面如何滚动，该元素始终保持在指定的位置上。常见的应用场景包括页眉、页脚、悬浮按钮等。...通过上述代码，我们实现了一个固定在页面顶部的导航栏。 使用固定定位属性的注意事项 在使用固定定位属性时，需要注意以下几点： 固定定位的元素脱离了正常的文档流，所以不会影响其他元素的布局。...但要注意避免元素重叠覆盖其他内容。 固定定位的元素会相对于浏览器窗口进行定位，而不是相对于其父元素。...所以，请确保设置了适当的 top 、 left 、 right 、 bottom 属性来确定元素的位置。 在移动设备上，固定定位属性可能有性能问题，并且在页面滚动过程中有时会出现闪烁的情况。...所以，在移动设备上使用固定定位要慎重考虑。 总结： 本文介绍了CSS中固定定位属性的基本使用方法，并通过一个固定在页面顶部的导航栏示例，详细说明了固定定位属性的代码实现步骤。
如果使用常规的 nth-child，例如 :nth-child(2) 在特殊类上，浏览器将选择应用了特殊类的元素，也是第二个子元素。...，尤其是在移动设备上。...作为开发人员，希望 100vh （视口高度的 100%）表示“与视口一样高”，但该 vh 单元不考虑移动设备上缩回导航栏之类的事情，因此有时它最终会太长并导致滚动。...这意味着当您向上或向下滚动时，动画会向前或向后滑动。此外，对于滚动驱动动画，您还可以根据元素在其滚动容器中的位置来控制动画。...这些函数现在在所有现代浏览器中都是稳定的，并使您能够在Web平台上创建更有机的布局。一个很好的例子是这个径向菜单布局，现在可以使用sin()和cos()函数进行设计和动画。
例如，可以设置top: 20px; left: 30px;让元素相对于其在文档流中的原始位置向下移动 20 像素，向右移动 30 像素。...脱离文档流的影响： 元素摆放忽略：当一个元素被绝对定位并脱离文档流后，文档流中的其他元素在摆放时会忽略这个元素。这意味着其他元素会好像这个绝对定位的元素不存在一样进行布局。...固定定位的元素固定为视口，即浏览器的可视窗口。这意味着无论页面如何滚动，固定定位的元素始终保持在相对于视口的相同位置。...三、定位下的居中 在绝对定位和固定定位中，可以通过以下步骤实现某个方向上的居中： 定宽（高）：首先确定要居中的元素的宽度（或高度，如果是垂直方向上的居中）。...设置margin为auto：最后，将元素的margin设置为auto。在绝对定位和固定定位中，margin设置为auto时，会自动吸收剩余空间，从而实现元素在该方向上的居中。
.element { position: absolute; top: 50%; left: 50%; } 固定定位 固定定位相对于浏览器窗口，脱离文档流，使用fixed的元素不会随窗口的滚动而滚动...*/ } 工作原理： 元素在页面滚动时表现为相对定位，直到其达到指定的阈值位置（例如距离顶部10px），然后变为固定定位，保持在指定位置不动，直到离开阈值范围。...如果元素离开视口顶部时没有足够的空间放置它，它将像相对定位一样继续滚动，直到可以固定在指定位置。 粘性定位不脱标，原有空间一直不变。...在设计中，粘性定位常用于创建导航栏在用户滚动时保持在屏幕顶部或侧边的效果，或者创建吸顶效果等。...*/ right: 0; /* 元素右侧与容器右侧对齐 */ margin-top: -50px; /* 元素向上移动自身高度的一半 */ width: 100px; /* 元素宽度
3.3 fixed 属性值 fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。 ?...因此，它能够形成"动态固定"的效果。比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）。 ? 页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）。 ?...等到页面重新向上滚动回到原位，工具栏也会回到默认位置。...} 上面代码中，页面向下滚动时，#toolbar的父元素开始脱离视口，一旦视口的顶部与#toolbar的距离小于20px（门槛值），#toolbar就自动变为fixed定位，保持与视口顶部20px的距离...除了上面提到"动态固定"效果，这里再介绍两个。 5.1 堆叠效果 堆叠效果（stacking）指的是页面滚动时，下方的元素覆盖上方的元素。
CSS定位是一个非常重要的布局工具，它允许我们精确地控制元素的位置，从而创建复杂的布局效果。...定位允许你从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。 一、文档流 在讨论CSS定位之前，我们首先需要理解“文档流”这一概念。...粘性定位 粘性定位是一种相对定位和固定定位的结合。通过设置 position: sticky;，元素在滚动时会在某个阈值内相对位置固定，一旦滚动超过阈值，元素会跟随滚动继续移动。...四、实战应用示例 一个固定导航栏 固定导航栏是一种常见的网页布局需求，它使导航栏在滚动页面时始终保持在视口的顶部。 导航栏使用了固定定位，始终保持在视口的顶部，内容区域向下移动以避免被导航栏遮挡。
实现方式 1、background-attachment 通过配置该 CSS 属性值为fixed可以达到背景图像的位置相对于视口固定，其他元素正常滚动的效果。...CSS 中使用 3D 变换效果，通过将元素划分至不同的纵深层级，在滚动时相对视口不同距离的元素，滚动所产生的位移在视觉上就会呈现越近的元素滚动速度越快，相反越远的元素滚动速度就越慢。...当用户滚动页面时，由于各层位于不同的 Z 轴位置，它们会以不同的速度移动，从而产生视差效果。...它只在浏览器准备好进行下一次重绘时才会执行，避免了不必要的计算和重绘。...这意味着在 60Hz、120Hz 或其他刷新率的显示器上，动画都能保持流畑。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
