Javascript 检查块可见性_Javascript_Jquery_Html_Css_Window

Javascript 检查块可见性

javascript jquery html css

Javascript 检查块可见性,javascript,jquery,html,css,window,Javascript,Jquery,Html,Css,Window,我们有如下代码： <body> <div class="blocks">some text here</div> <div class="end"></div> </body> 这里有一些文字文本是否适合当前浏览器可见部分如何检测，块是否在浏览器窗口的可见部分我的意思是，如果resourcion是1024x768并且.block高度大于768，那么.end是不可见的我们应该在window.ready和浏览器窗

我们有如下代码：

<body>
<div class="blocks">some text here</div>
<div class="end"></div>
</body>


这里有一些文字

文本是否适合当前浏览器可见部分

如何检测，块是否在浏览器窗口的可见部分

我的意思是，如果resourcion是1024x768并且

.block

高度大于768，那么

.end

是不可见的

我们应该在window.ready和浏览器窗口更改上检测到这一点
如果块可见，则运行一些函数

感谢您的帮助。

首先抓取窗口尺寸

var windowSize = {width: $(window).width(), height: $(window).height() + $(window).scrollTop()};

接下来抓取与文档相关的div位置：

var position = $('.block').offset()

然后做你的假设：

if(position.top > windowSize.height){ /* here we go */ }

您可能还希望获取div维度，以防它可能在顶部或左侧超出边界

您可以将其转换为一个返回布尔值的函数，然后在window.resize和document.ready事件中调用它

编辑：添加了scrollTop以解释滚动。

首先抓取窗口尺寸

var windowSize = {width: $(window).width(), height: $(window).height() + $(window).scrollTop()};

接下来抓取与文档相关的div位置：

var position = $('.block').offset()

然后做你的假设：

if(position.top > windowSize.height){ /* here we go */ }

您可能还希望获取div维度，以防它可能在顶部或左侧超出边界

您可以将其转换为一个返回布尔值的函数，然后在window.resize和document.ready事件中调用它

编辑：添加了scrollTop来解释滚动。

作为一个快速回答，您必须在加载时进行一些计算（psuedocode假设为jQuery）

查找窗口高度$（window）.outerHeight（true）

查找“.end”元素$（“.end”）.offset（）的偏移量

查找窗口$（window.scrollTop（）的滚动距离

算算！大致应该是：

如果（（步骤1+步骤3）>步骤2）{ //在这里做事 }

请注意，这并不检查您是否滚动到“.end”元素。我没有验证这一点，所以希望我没有遗漏什么大的东西。

作为一个快速回答，您必须在加载时进行一些计算（psuedocode假设jQuery）

查找窗口高度$（window）.outerHeight（true）

查找“.end”元素$（“.end”）.offset（）的偏移量

查找窗口$（window.scrollTop（）的滚动距离

算算！大致应该是：

如果（（步骤1+步骤3）>步骤2）{ //在这里做事 }

请注意，这并不检查您是否滚动到“.end”元素。我没有证实这一点，所以希望我没有遗漏什么大的东西

获取元素的offsetTop和offsetLeft属性

获取相关元素的宽度

获取屏幕的宽度

进行相关的数学运算，查看元素是在视口中还是现在

在jQuery中，您可以执行以下操作

$（“#元素”）.attr（“offsetTop”）

编辑： 简单有效：

获取元素的offsetTop和offsetLeft属性

获取相关元素的宽度

获取屏幕的宽度

进行相关的数学运算，查看元素是在视口中还是现在

在jQuery中，您可以执行以下操作

$（“#元素”）.attr（“offsetTop”）

编辑： 简单有效：

什么：

一些东西：

是否需要检测整个元素是否在视图中，或者仅顶部或底部？是否需要检测整个元素是否在视图中，或者仅顶部或底部？这不适用于超出滚动范围（即使我们添加了滚动检查）。您只考虑元素宽度，而实际上您必须考虑左偏移和顶部偏移值。谢谢，干得好。我的版本>虽然你的更结构化。这不适用于超出滚动范围（即使我们添加滚动检查）。您只考虑元素宽度，而实际上您必须考虑左偏移和顶部偏移值。谢谢，干得好。我的版本>虽然你的更结构化。回答得好。此外，您还可以执行

$（“#元素”）.offset（）.top

。回答得好。此外，您还可以执行

$（“#元素”）.offset（）.top

。