window.pageYOffset和document.body.getBoundingClientRect().top之间的区别？
window.pageYOffset是一个属性，用于获取或设置文档在垂直方向上滚动的像素值。它返回当前文档在垂直方向上滚动的像素值，如果文档没有滚动则返回0。这个属性在大多数现代浏览器中都被支持。
document.body.getBoundingClientRect().top是一个方法，用于获取文档中指定元素的大小及其相对于视口的位置。它返回一个DOMRect对象，其中包含了元素的位置信息，包括top、right、bottom和left等属性。通过获取body元素的位置信息，可以计算出元素相对于视口顶部的距离。
这两者之间的区别在于，window.pageYOffset获取的是整个文档在垂直方向上的滚动距离，而document.body.getBoundingClientRect().top获取的是body元素相对于视口顶部的距离。具体来说，window.pageYOffset可以用于判断文档是否发生了垂直滚动，以及获取滚动的距离；而document.body.getBoundingClientRect().top可以用于获取body元素相对于视口顶部的位置，可以用于实现一些需要根据元素位置来进行操作的功能。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：提供弹性计算能力，满足不同规模业务的需求。详情请参考：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CDB）：提供稳定可靠的云端数据库服务，支持高可用、备份恢复等功能。详情请参考：https://cloud.tencent.com/product/cdb
- 云存储（COS）：提供安全可靠的对象存储服务，适用于图片、音视频、文档等大规模数据的存储和分发。详情请参考：https://cloud.tencent.com/product/cos
- 人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai
- 物联网（IoT）：提供全面的物联网解决方案，包括设备接入、数据管理、应用开发等。详情请参考：https://cloud.tencent.com/product/iot
相关·内容
3回答
来自getBoundingClientRect的负top意味着什么？
javascript、html、css
我正在使用函数，并试图理解它的top行为。负数顶部是什么意思？
在下面的示例中，当您向下滚动时，top的值变为负值。谁能解释一下，我如何解释来自getBoundingClientRect的负的top值
document.addEventListener("scroll", () => {
let element = document.getElementById("test");
let rect = element.getBoundingClientRect();
console.log(rect.bottom, "bottom.
浏览 4提问于2019-08-14得票数 0
3回答
如何使用jquery检测垂直滚动位置？
javascript、jquery、html、events、vertical-scrolling
使用jquery，您如何设置当垂直滚动可见时触发的事件，以及当您从页面的上半部分切换到下半部分时触发的事件，反之亦然。
例如，如果垂直滚动条在那里，然后我在页面上的上半部分查找，然后向下移动，所以我在页面的下半部分，函数就会发生。然后，如果我向上移动，所以我又回到了上半部分，这个函数就会发生。
谢谢。
浏览 0提问于2013-08-03得票数 3
当我们给一个元素一个具有垂直和水平偏移(例如底部和左侧)的位置属性绝对时，它是相对于位置属性为相对的最近父元素定位的。
如果没有父元素具有相对属性，则相对于浏览器窗口定位绝对定位的元素。固定定位的定义与它所说的完全相同，“固定定位是一种绝对定位，其中元素相对于浏览器窗口进行定位。”
我的主要问题是，为什么当页面向下滚动时，绝对定位的元素会向上移动，而当它们都相对于浏览器窗口放置时，固定定位的元素不会向上移动。
浏览 2提问于2018-06-18得票数 0
1回答
CSS Div位置行为
css、css-position、fixed、absolute
我在理解div位置(相对、绝对、固定)属性时遇到了问题。我基本上有一个绝对的div居中。在div中，应该可以垂直和水平滚动。在这个div里面应该是一个固定的标题，它的宽度大于屏幕( overflow )，还有一个内容div，它在垂直和水平方向上都有溢出。
html,
body {
height: 100%;
width: 100%;
background: #fff;
margin: 0px auto;
padding: 0px auto;
position: fixed;
}
.container {
width: calc(10
浏览 2提问于2016-05-21得票数 0
1回答
尽管overflow设置为auto，但水平滚动条不会出现在DIV中
css、asp.net、scrollbar
我有一个带有图像的Div，可以在单击事件时更改其大小。div应该做出反应，在必要时显示滚动条。 <div id="DisplayGraph" runat="server">
<asp:image runat="server" id="Graph" CssClass="Graph"/>
</div> CSS #DisplayGraph {
height: 100%;
width: 100%;
transform-origin: left top;
positio
浏览 11提问于2019-03-25得票数 0
回答已采纳
1回答
Bootstrap :在滚动条上添加/删除固定位置
jquery、twitter-bootstrap、css
我试图将导航条固定在顶部，在滚动条上将固定顶部位置添加到0-default，并将导航栏放回相同的位置，同时向上滚动(顶部300)。
下面是我的代码
var height = jQuery('.navbar-default').offset().top;
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll>height) {
$('.navbar-default').css({position: 'fixed', t
浏览 1提问于2019-01-21得票数 0
2回答
用javascript获取固定容器中元素的垂直位置
javascript、html、css
当父容器是scrollTop时，尝试用position: fixed获取元素的垂直位置时，我遇到了一些困难。
当使用scrollTop时，值输出为0。我猜这是因为元素不再严格地存在于标准流中了。是否有明显的遗漏，或者是否有不同的方法来保持position: fixed而不使用jQuery。也许有一种方法可以得到元素的位置与其父元素的关系？
我在下面附上了测试代码。
document.getElementById('target').scrollTop;
.container {
padding-top: 1200px;
position: fixed;
top:
浏览 3提问于2017-05-08得票数 2
回答已采纳
1回答
停止在Big Cartel网站上滚动标题图像
css、bigcartel
我目前正在定制我的Big Cartel网站，当使用Parade主题时，我遇到了标题图像与页面滚动的问题。
这对于我的商店主页是可以的，但是对于我的Lookbook页面，它覆盖了我太多的内容，我希望它要么被隐藏，要么停止滚动。
有谁有解决这个问题的办法吗？
非常感谢!
.header {
background-color: transparent;
padding: 50px;
position: fixed;
top: 0;
width: 100%;
z-index: 97;
}
@media screen and (max-width: 767px) {
.hea
浏览 5提问于2018-09-27得票数 1
2回答
从页面顶部获取项目偏移量
javascript
我正在尝试获取div的顶部偏移量，并且我有以下代码，该代码在页面滚动时运行：
var $elem = document.querySelector(selector);
var elemTop = $elem.offsetTop;
console.log(elemTop);
但当我滚动时，它总是将0打印到控制台，即使元素在折叠之下。
浏览 6提问于2015-12-23得票数 11
回答已采纳
1回答
getBoundingClientRect会根据滚动位置动态变化吗？
javascript、html、reactjs、dom
下面的代码有什么问题？getBoundingClientRect的值并不总是相同的，当我滚动后启动函数时，它会发生变化。下面的函数只有在我没有滚动页面的情况下才是准确的(滚动到正确的位置)。
scrollToTargetAdjusted() {
const element = document.getElementById('myDiv')
const dockingElementOffset = 80
const elementPosition = element.getBoundingClientRect().top
const offsetPosi
浏览 0提问于2019-08-21得票数 2
1回答
如何在顶部检查容器是否溢出？
javascript、html、css、overflow
我正在使用Puppeteer废弃Slack。我想验证一下我是否滚动到了频道摘要的顶部。 问题是频道提要不能滚动，所以我不能使用the method documented on MDN element.scrollHeight - Math.abs(element.scrollTop) === element.clientHeight 对于我的例子，元素没有滚动，但有溢出的子元素，他们建议检查计算样式： window.getComputedStyle(element).overflowY === 'visible' 然而，这并不起作用，我认为有两个原因。首先，在本例中，溢出隐藏
浏览 31提问于2021-10-01得票数 0
2回答
使div居中(水平和垂直)，如果向下滚动，不要停留在中间
html、css
我有一个水平和垂直居中的div。问题是，如果我向下滚动，div也会向下滚动并停留在中心。我怎么解决它不能向下滚动的问题？
现在它完美地居中(我使用页边距是因为图片的大小(200px X 200px))。但当向下滚动时，它会停留在中间。
.logo {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
<image class="logo&#
浏览 11提问于2017-06-28得票数 3
回答已采纳
3回答
getBoundingClientRect().top和offsetTop有什么区别？
const elem = document.querySelector('#find');
console.log('getBoundingClientRect: ' + elem.getBoundingClientRect().top);
console.log('offsetTop: ' + elem.offsetTop);
// Stuff to push the div down the page
<div id='find
浏览 1提问于2017-05-25得票数 26
回答已采纳
2回答
浏览器认为什么是页面？
html、css、xhtml
( a)浏览器认为什么是页面？
假设监视器的分辨率为800*600，我们扩展浏览器以获取整个监视器表面积A1。如果我们将浏览器的大小调整到一个区域A1 (A1 < A)，使它仍然捕获整个html文档(因此我们不必滚动)，那么浏览器将A1视为整个页面。但是，如果我们再次将浏览器调整为A2区域，在该区域需要滚动条才能查看整个html文档，那么页面的大小将大于显示的A2区域。
在这种情况下，浏览器考虑整个页面的哪个区域-A还是A1？
( b)在何种情况下这一信息可能是重要的(也许是在绝对或相对定位或.的情况下)？
编辑：
绝对定位相对于提供定位上下文的包含块；默认情况下，这是文档。
如
浏览 4提问于2009-09-15得票数 0
4回答
HTML5/jQuery -垂直页面滑动
jquery、html、sliding
我见过一些网站，他们在顶部有一些链接，当你点击第一个链接时，你会在页面上被向下滚动( jQuery向下滚动效果)，转到你点击的id (#)。(带有链接的菜单将跟随您)。然后你可以点击另一个链接，你会被带到下一页。
我找不到这种技术的名称，我在垂直页面滑动上的搜索没有返回我所希望的结果。
Tumblr.com有这样的东西，只是不完全是我想要的。也有类似的东西，唯一缺少的是下面的菜单，当页面滚动的时候。
有人能帮我解释一下吗？或者给我举一些例子？
提前感谢！
浏览 3提问于2012-03-16得票数 2
回答已采纳
1回答
Android CSS滚动条会根据距上边框的距离进行偏移--为什么？
android、html、css、google-chrome、overflow
我正在为安卓/Chrome和iPad/Safari编写一个HTML5应用程序。在其中，我创建了一个带有overflow:auto和top:XXpx的DIV。下面是一个示例：
<div id="divVerticalList" style="width: 180px; height: 600px; position: absolute; left: 100px; top: 200px;">
<div id="divVerticalListUL" style="overflow: auto; width: 100%; h
浏览 4提问于2013-09-14得票数 1
1回答
跳转到下一个div，并在用户滚动时将其置于屏幕的中心
javascript、jquery、css、html
我正在建立一个单页面的网站，并希望有多个div，这是近似400px (但不同)的顶部彼此。我想跳转到下一个div，并将其集中在屏幕上，同时调整上下内容的不透明度以将注意力吸引到中心div，而不是平滑的滚动。
我试过使用一些滚动插件，但还没有得到我想要的东西，它们中的大多数都是针对整个页面的div，而不是只有1/3左右的页面高度。
有没有人能给我指一指我可以适应的东西来执行这个。
浏览 2提问于2015-05-21得票数 0
2回答
ScrollLeft ScrollTop，他们是怎么工作的？
javascript、jquery
我正在尝试将我的元素中的一些用于垂直和水平滚动，并在堆栈溢出上查找一些示例，但我不知道它们为什么工作，因此我不能将其用于不同的目的:这是每个人都给出的代码，它可以工作：
$(window).scroll(function() {
$('#header').css({
'top': $(this).scrollTop() + 15,
'left': $(this).scrollLeft() + 15 // top, left = 15px in css
});
}
因此，它所做的是设置标题id标签
浏览 3提问于2015-09-24得票数 0
回答已采纳
2回答
为什么我的CSS中的粘性位置不起作用？
html、css、position、sticky
我试图让一个侧边栏坚持滚动，但它不工作。如何找出错误代码的缺失步骤？侧边栏应该浮动在与view-port相同的位置。下面是我使用的代码：
.sidebar-nav {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
.sidebar-nav-list {
padding: 0 .625rem 1.25rem 1.5rem;
margin-left: 2.625rem;
position: relative;
border-left: 2px solid #1a73e8
}
.sidebar-na
浏览 0提问于2020-06-24得票数 0
1回答
设计策略-应用程序书签位置中的大型HTML
iphone、html、android、windows
我编写的Windows/iPhone/Android应用程序主要在HTML容器视图中显示大型文档(HTML)。
要确定用户在文档中滚动到的位置，以便当应用程序再次运行时，它会转到HTML文档中的该位置，那么有什么好策略？
我所有的软件都可以‘监听’javascript。
有没有办法在HTML页面中找到可见部分的位置？
伊恩
浏览 1提问于2010-11-08得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
