获取以视口顶部和底部为锚点的元素滚动百分比 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

vivo悟空活动中台-基于行为预设的动态布局方案

锚点的设置可以让元素的定位更加灵活：如果将元素的锚点设置为其底边的中点，那么令锚点吸附视口顶部即可实现元素底部相对视口顶部距离固定，这是常规固定定位无法实现的。...2.2.2、吸附性对于一个元素，可以预设其锚点吸附于视口的顶部/底部，左边/右边，具体规则如下：元素在水平方向或垂直方向上，不能同时吸附对应的两条边；比如不能令一个元素同时吸附视口顶部和视口底部；但是可以另其同时吸附视口顶部和视口左边...元素若预设吸附了视口某一条边，则在任意规格的视口中，元素锚点相对于该条边的距离相同（以 rem 为单位）。...特性是元素锚点与视口底部的距离固定，即不同视口中，元素的高度的一半与元素底部到到屏幕底部的距离的和是不变的。...特性是元素锚点距视口顶部和底部的距离成固定比例，即不同视口中，元素高度的一半加上元素顶部到屏幕顶部的距离的和的值，与元素高度的一半加上元素底部到屏幕底部的距离的和的值，这两个值相等。

2K1 0

你也许不知道的浏览器的一些滚动行为

最常用的方法： // 获取元素的offsetTop(元素距离文档顶部的距离) let offsetTop = document.querySelector(".box").offsetTop; //...或者用锚点：盒子出现在顶部效果如下： 3....出现在视口顶部、center出现在视口中央、end出现在视口底部 document.querySelector(".box").scrollIntoView({ block: "start" ||...} 效果如下：注意：设置了该属性之后，所有方法都可以不用设置behavior参数了，二选一即可，因为都是控制当前指定元素的滚动行为，所以锚点跳转、设置scrollTop也具有平滑(smooth)的滚动行为...window.scrollTo(0, 999999); 注意：平滑滚动到顶部或者底部自己加参数或者属性即可✅ 3.

2.9K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

页面滚动，元素跳动；附带jquery.scrollex.js插件

本文以模板之家的 “全屏Story日记本个人主页自适应模板”为例，解析这两种动画实现的方式之一。该例子除了动画的加载效果外，还有自适应相关代码（支持PC端和移动端）。...· enter：当指定元素进入视口时触发。可以通过mode, top和bottom参数来调整它的行为。 · leave：当指定元素离开视口时触发。...mode 用于决定元素和视口的接触面积，判断一个元素是否在视口之内。可以是下面的一些取值：取值行为 default 元素和视口的接触面积在视口之内。 top 顶部视口边缘在元素之内。...bottom 底部视口边缘在元素之内。 middle 顶部或底部视口边缘在元素的中间。...top和bottom 通过top和bottom参数可以移动元素和视口的接触面积，可以使用像素值，百分比值，或视口的百分比值(如20vh)。正值向视口内部移动，负值向视口外部移动。

5.6K1 0

CSS Viewport 单位，很多人还不知道使用它来快速布局！

简介根据CSS规范，视口百分比单位相对于初始包含块的大小，它是web页面的根元素。视口单位为：vw，vh，vmin和vmax。 vw单位表示根元素宽度的百分比。1vw等于视口宽度的1%。...视口宽度 vw单位表示根元素宽度的百分比，1vw等于视口宽度的1%。 ?...假设我们有一个元素与以下CSS： .element { width: 50vw; } 当视口宽度为500px时，50vw计算如下 width = 500*50% = 250px 视口高度 vh单位表示根元素高度的百分比...Vmin 和 Vmax 用例该用例是关于页面标题元素的顶部和底部padding 。当视口较小（移动）时，通常会减少padding 。...通过使用vmin，我们可以在视口较小尺寸（宽度或高度）的基础上获得合适的顶部和底部 padding。 .page-header { padding: 10vmin 1rem; } ?

3.2K3 0

HTML5中的DOM扩展（二）

head属性 HTMl5增加了document.head属性，它指向了文档的head元素，可以直接取得head元素。...自定义数据属性非常适合需要给元素附加某些数据的场景。真的非常好用，尤其是在点击后跳转页面发送当前点击的id。...scrollIntoVIew()方法接受二个参数一、alignToTop 它是一个布尔值 true：滚动窗口和顶部视口对 false：滚动窗口和底部视口对齐二、scrollIntoViewOptions...一个选项对象 behavior 定义过度动画，可以取值为smooth和auto block 定义垂直方向的对齐，有四个值 start center end nearest inline 定义水平方向的对齐...不传参的话相当于alignToTop等于true 这个方法可以用来我们设置打开页面自动滚动到某某地方，很像我们的锚点工具，但是它这个是滚动，能给用户带来更好体验。

9281 0

waypoint_使用jQuery Waypoint创建粘性导航标题

当用户向下滚动时，表达式direction==='down'计算结果为true ，因此我们的导航栏将接收到sticky类，并停留在视口的顶部。...当元素的顶部在视口顶部下方的指定距离处时，正值触发路点；当元素的位置在视口顶部上方远处时，负值触发路径。）。...offset的值可以是数字（代表固定数量的像素），包含百分比的字符串（解释为视口高度的百分比）或返回多个像素的函数。最后一个可以提供一些严重的灵活性，稍后我们将使用它。...如果您不仅仅想添加和删除类，还可以考虑使用LavaLamp这样的插件。在某些时候，您可能已经注意到，单击导航栏中的链接会将部分的顶部置于浏览器视口的顶部。...它带有两个参数-滚动目标和包含不同选项的对象，在这种情况下，这很容易解释。单击链接的href属性可以很好地用作滚动目标，并且用作顶部偏移的表达式会将目标放置在视口高度的15％处。

3.3K3 0

介绍一个页面平滑滚动小技巧

背景今天写需求的时候发现一个小的优化点：用户选择了一些数据之后, 选择的条目需要高亮，有时候列表很长，为了提升用户体验，需要加个滚动，自动滚动到目标位置。...1.scrollTop 第一想到的还是 scrollTop, 获取元素的位置，然后直接设置: // 设置滚动的距离element.scrollTop = value; 不过这样子有点生硬，可以加个缓动效果...布尔值 * 如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。...* 如果为 false，元素的底端将和其所在滚动区的可视区域的底端对齐。...start表示将视口的顶部和元素顶部对齐；center表示将视口的中间和元素的中间对齐；end表示将视口的底部和元素底部对齐；`nearest`表示就近对齐。

1.3K2 0

CSS | 视差滚动 | 笔记

如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。...子元素 word 随着页面滚动显示，对子元素 bg 设置 background-attachment: fixed，使其在当前视口固定。...vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的。 100vh 在不同的浏览器的实现方式上也有一点微妙的变化，这使得它几乎毫无用处。...最好避免 100vh，而是依赖 JavaScript 来设置高度，以获得完整的视口体验。...这些浏览器没有将 100vh 的高度调整为视口高度变化时屏幕的可见部分，而是将 100vh 设置为隐藏地址栏的浏览器高度。

5922 1

clientWidth，offsetWidth，scrollWidth你分的清吗

+ 溢出内容的尺寸，这个只针对dom的子元素出现溢出情况时，才有效果，不然它始终和clientHeight相等 scrollTop 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度...注意:当元素溢出浏览器的视口，值会变成负数。...但是滚动元素是从可视区域的左上角和右下角开始计算，如果想获取滚动元素整体的坐标，需要加上滚动距离　var X = node.getBoundingClientRect().left+node.scrollLeft...大概是这样实现思路就是，去拿到选中元素的clientHeight和offsetTop,并和列表的高度区间做比较，计算出元素是在列表视口的内部，还是溢出的视口，如果溢出了视口，那么就回滚。...就是元素底部距离滚动容器顶部的距离，再减去20像素，保证出现在视口中间 const needScroll = top - containerOffsetTop - 20; if (needScroll

1.9K1 0

CSS 尺寸单位概述

如果值是一个百分比，那么line-height的计算值就是百分比值乘以计算出的字体大小（以像素为单位）。...这与百分比不同，百分比将尺寸设置为父元素宽度或高度的一定比例。...「动态视口」，无论浏览器界面是否展开或缩回，动态视口都会存在，并根据可用空间的大小而增大或缩小 image.png 例如，iOS 上的 Safari 浏览器会在你从页面顶部向下滚动时隐藏后退按钮、标签菜单和其他控件...每个概念视口都有一组相应的视口单位。UA 默认视口单位包括 vw、vh、vmin 和 vmax。大视口、小视口和动态视口单位遵循类似的命名规则，前缀为 l、s 或 d，即 lvw 或 dvmin。...另一方面，动态视口尺寸并不稳定。当方向改变或用户滚动时，它们可能会改变。例如，当浏览器界面影响视口大小时，高度值为 100dvmax 的元素就会改变大小。

2831 0

移动端那些戳中你痛点的软键盘问题及解决方法

大厂技术坚持周更精选好文问题问题描述：在ios手机中，当页面中包含有输入框时，点击输入框，键盘弹起，会让页面中被fixed的元素失效。所以造成了底部吸底和顶部吸顶的元素错位的问题。...ui希望优化的点：一开始，ui针对这个视频中出现的问题，提出了3个优化点： 1、希望吸顶元素能够继续吸顶 2、希望吸底元素能够继续吸底 3、希望当键盘弹起之后，输入框能够保持在键盘之上48px的距离...最终决定优化的点：经过一番调研，在我搜集到的可行方法中，结合有限的时间因素，在和ui协调之后，将这3个优化点变成了下面这3个优化点。...所以解决办法就是让键盘弹起时，添加吸底按钮以及底部元素的margin-bottom为header的高度就行。...参考文章： WebView上软键盘的兼容方案[5] js如何获取iOS键盘高度[6] 移动端input“输入框”常见问题及解决方法[7] ios键盘难题与可见视口（visualViewport）api[

7.8K3 0

关于移动端适配，你必须要知道的

布局视口( layout viewport)：当我们以百分比来指定一个元素的大小时，它的计算值是由这个元素的包含块计算而来的。当这个元素是最顶级的元素时，它就是基于布局视口来计算的。...4.7 获取浏览器大小浏览器为我们提供的获取窗口大小的 API有很多，下面我们再来对比一下： ? window.innerHeight：获取浏览器视觉视口高度（包括垂直滚动条）。...document.documentElement.clientHeight：获取浏览器布局视口高度，包括内边距，但不包括垂直滚动条、边框和外边距。...以 iPhone6为例：布局视口为 375px，则 1rem=37.5px，这时 UI给定一个元素的宽为 75px（设备独立像素），我们只需要将它设置为 75/37.5=2rem。...我们需要将顶部和底部合理的摆放在安全区域内， iOS11新增了两个 CSS函数 env、constant，用于设定安全区域与边界的距离。

2K1 0

关于移动端适配，你必须要知道的

布局视口( layout viewport)：当我们以百分比来指定一个元素的大小时，它的计算值是由这个元素的包含块计算而来的。当这个元素是最顶级的元素时，它就是基于布局视口来计算的。...4.7 获取浏览器大小浏览器为我们提供的获取窗口大小的 API有很多，下面我们再来对比一下： ? window.innerHeight：获取浏览器视觉视口高度（包括垂直滚动条）。...document.documentElement.clientHeight：获取浏览器布局视口高度，包括内边距，但不包括垂直滚动条、边框和外边距。...以 iPhone6为例：布局视口为 375px，则 1rem=37.5px，这时 UI给定一个元素的宽为 75px（设备独立像素），我们只需要将它设置为 75/37.5=2rem。...我们需要将顶部和底部合理的摆放在安全区域内， iOS11新增了两个 CSS函数 env、constant，用于设定安全区域与边界的距离。

1.9K4 1

关于移动端适配，你必须要知道的

布局视口( layout viewport)：当我们以百分比来指定一个元素的大小时，它的计算值是由这个元素的包含块计算而来的。当这个元素是最顶级的元素时，它就是基于布局视口来计算的。...4.7 获取浏览器大小浏览器为我们提供的获取窗口大小的 API有很多，下面我们再来对比一下： ? window.innerHeight：获取浏览器视觉视口高度（包括垂直滚动条）。...document.documentElement.clientHeight：获取浏览器布局视口高度，包括内边距，但不包括垂直滚动条、边框和外边距。...以 iPhone6为例：布局视口为 375px，则 1rem=37.5px，这时 UI给定一个元素的宽为 75px（设备独立像素），我们只需要将它设置为 75/37.5=2rem。...我们需要将顶部和底部合理的摆放在安全区域内， iOS11新增了两个 CSS函数 env、constant，用于设定安全区域与边界的距离。

1.9K2 0

详细设计一个文章页目录插件

随着页面的滚动，目录将从头滚到尾，那么滚动的范围是从第一个子目录贴着滚动区域的顶部到最后一个子目录贴着滚动区域的底部为止；当页面在最顶部的时候，当前高亮的子目录肯定是第一个，随着页面的向下滚动，高亮的位置也在不断下移...，如上面的图 ③ 到图 ④ 的变化过程；如果这个高度差过于大，使得滚动后最后一个子元素不能贴着滚动区域底部的时候，则不按照这个高度差进行滚动，而真实需要滚动的距离是最后一个子目录到滚动区域底部的距离，...这部分内容开始前，我们先来复习一个 API，该方法会返回元素的大小及其相对于视口的位置： Element.getBoundingClientRect() 需求分析的时候有提到，高亮的原则是当前标题所在的位置到浏览器可视区域顶部的距离需要小于或等于一个固定值...浏览器视口高度变了怎么办因为我们的滚动高度是根据浏览器视口高度计算出来的，如果浏览器视口高度变化了，那这个时候再去滚动页面，那肯定会出问题的。...所以需要做的就是把和视口高度有关的逻辑抽离出来，统一放到一个函数里，当监听到视口高度变化的时候，再去执行这个函数。

2.4K2 0

面试官问：如何判断一个元素是否在可视区域？

通过元素的位置信息和滚动条滚动的高度在这里，我们先介绍几个元素的位置信息和大小： Element.clientWidth Element.clientWidth 属性表示元素的内部高度，以像素计。...❞ window.innerHeight window.innerHeight 属性表示浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。...通过getBoundingClientRect方法来获取元素的位置信息 Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置...一次是目标元素刚刚进入视口（开始可见），另一次是完全离开视口（开始不可见）。...() 方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回 null boundingClientRect：目标元素的矩形区域的信息 intersectionRect：目标元素与视口（或根元素）

2.7K2 1

「实用推荐」如何优雅的判断元素是否进入当前视区

背景在上篇文章：记一次「无限列表」滚动优化中，我介绍了「如何优化一个无限滚动列表」。用到了懒加载方案，一个关键点是：需要判断元素是否在当前视区。我们今天就看看这个问题。...---- 今天的主要内容包括：使用元素位置判断元素是否在当前视区使用 Intersection Observer 判断元素是否在当前视区实例：懒加载实例：无限滚动实用 npm 包推荐正文...从输出最有用的特性是: isIntersecting target intersectionRect isIntersecting：当元素与默认根（在本例中为视口）相交时，将为true. target：...这将包含有关元素，其高度，宽度，视口位置等的信息。在线 Demo: https://codepen.io/myogeshchavan97/pen/pogrWKV?...// 如果显式指定了跟元素，该值可以使用百分比，即根元素大小的百分之多少。 // 如果没指定根元素，使用百分比会出错。

1.4K2 0

js获取各种距离和宽高

浏览器滚动掉的Y距离鼠标event事件属性说明 offsetX 以当前的元素的左上角为原点, 距离元素顶部的距离 offsetY 以当前的元素的左上角为原点, 距离元素左侧的距离 clientX...以浏览器窗口(视口)的左上角为原点, 距离视口顶部距离, 不随页面滚动而改变 clientY 以浏览器窗口(视口)的左上角为原点, 距离视口左侧距离, 不随页面滚动而改变 pageX 以整个页面的左上角为原点..., 距离页面顶部的距离, 随页面滚动而改变 pageY 以整个页面的左上角为原点, 距离页面左侧的距离, 随页面滚动而改变 screenX 以计算机显示屏屏幕左上角为原点, 距离屏幕顶部的距离 screenY...'px', 为字符串类型) 距离属性说明 offsetTop/Left 元素距离最近的带有定位(fixed/relative/absolute)的父元素的顶部/左侧的距离 scrollTop/Left...此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边/左侧的距离，也就是元素滚动条被向下/向右拉动的距离。

1971 0

大家都能看得懂的源码之ahooks useInfiniteScroll

另外假如传入 target 和 isNoMore 参数，通过监听 scroll 事件，判断是否滚动到指定的位置（支持设置 threshold 值-距离底部距离阈值），进行自动发起加载更多请求，从而实现滚动自动加载效果...一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为 0。...scrollHeight[6] Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。...一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为 0。...clientHeight[7] 这个属性是只读属性，对于没有定义 CSS 或者内联布局盒子的元素为 0，否则，它是元素内部的高度 (单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

6513 0

JS滑动滚动的n种方式

，会滚动元素的父容器，将该元素滚动到浏览器的可视区域这是对hash锚点定位的进化升级，对于常用框架由于使用了hashRouter导致锚点定位失效的情况是一种不错的补偿 1.2 API介绍 alignToTop...可选一个Boolean值：如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。...如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。...根据MDN上的定义可知 Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。...一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

6.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭