如何确定 HTML 元素是否在屏幕外?

2024-02-17

如何使用 jQuery 确定给定元素位于可视窗口区域的顶部上方还是底部下方?这将使我能够确定该项目是否在屏幕外以及在哪个方向。

Ideally:

var topPos = $(this).relativeToTop();
var bottomPos = $(this).relativeToBottom();
var isOnScreen = topPos >= 0 && bottomPos >= 0;

有在线插件或示例吗?


var off = $(this).offset();
var t = off.top;
var l = off.left;
var h = $(this).height();
var w = $(this).width();
var docH = $(window).height();
var docW = $(window).width();

var isEntirelyVisible = (t > 0 && l > 0 && t + h < docH && l+ w < docW);

EDIT在那里的某个地方,也可以检查 $(document).scrollTop() ,具体取决于您希望脚本如何处理滚动状态......

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何确定 HTML 元素是否在屏幕外? 的相关文章

  • XMLHttpRequest xml 响应与 jQuery 1.4.1 的问题,如何强制将请求响应作为纯文本处理?

    我只是在玩 jQuery 并尝试一些应该很简单的东西 但它就是行不通 document ready function ajax url http soiduplaan tallinn ee data a p routes transport
  • 区分单击与 mousedown/mouseup

    我已经阅读了有关这种情况的 stackoverflow 上的几个答案 但没有一个解决方案有效 我尝试根据用户是否单击某个元素或使用 jQuery 将鼠标按住该元素来执行不同的操作 有可能做到这一点吗 onMouseDown 将在按下左侧或右
  • 代码点火器 JSON

    你好 我使用 codeigniter 然后我从控制器中的数据库中回显输出 然后在我的视图文件中执行以下操作 但它没有显示任何内容 S 我的模型文件 function forumList this gt db gt select oversk
  • 将 Isotope 与通过 XML 和 jQuery 加载的对象一起使用。这可能吗?

    我正在使用 XML 和 jQuery 加载对象 并尝试连接到同位素 但似乎这是不行的 这可能吗 我尝试了许多不同的解决方案 但似乎找不到有效的解决方案 这就是我所拥有的 我已经尝试过同位素中的回调函数 但仍然没有运气 我用 XML 调用我的
  • jQuery fadeOut 一个 div,fadeIn 另一个 div 在其位置

    我正在尝试一个简单的 jQuery 脚本来淡出一个 div 并淡入另一个 div 但由于某种原因 第一个 div 永远不会淡出 这可能是代码的一个明显问题 但我似乎无法弄清楚 div div div div
  • Angular 完成渲染后运行 jQuery

    我正在尝试使用 angularjs 中的 json 对象填充个人资料页面 我正在为此使用指令 我有一个配置文件指令 其中包含配置文件部分指令作为子项 配置文件部分具有作为子级的配置文件子部分指令 我需要在 Angular 开始编译之前和 A
  • 谷歌闭包编译器和jquery

    我将 js 代码复制粘贴到谷歌编译器中 当我将其复制回我的应用程序时 它不起作用 我意识到我的代码需要jquery 所以我将jquery代码和我的代码复制到google编译器中 希望它能轻松解决问题 但它也不起作用 在chrome下 代码有
  • 使用 jQuery 和 jQuery UI 运行任何 Jest 测试时出现问题

    所以我有一个名为的开源库Angular Slickgrid https github com ghiscoding Angular Slickgrid还没有测试 我正在尝试使用 Jest 但真的很难使用它 该库是旧的 jQuery 数据网格
  • 拖动调整大小手柄时多次触发调整大小事件

    我希望这个 jQuery 插件能够工作 但它没有 http andowebsit es blog noteslog com post how to fix the resize event in ie http andowebsit es
  • jQuery 日期选择器 - 时区问题

    我们在网站上使用 jQuery 日期选择器来选择预订的日期和时间 日历当前设置为太平洋标准时间 当用户尝试从其他时区访问时 这会导致错误 我们是否应该将服务器设置为 UTC 并让应用程序根据用户的 IP 地址自动选择用户的时区 我很好奇我们
  • 通过搜索查找下一个文本并突出显示不起作用

    当在搜索框中搜索任何文本时 它可以找到并突出显示正确的文本 但是当搜索下一个 新文本时 它无法找到下一个 新文本 再次搜索时它不起作用 我无法找到问题 这JS below JS button search click function va
  • JavaScript:参数列表后缺少 )

    这个 JavaScript 产生一个错误 参数列表后缺少 在 firebug 中使用代码 我究竟做错了什么 功能d缺少左括号 answer after 不应该逃避 只需常规报价即可
  • jQuery 单属性、带过滤器的多值选择器

    Images var boxlinks a href filter href png href gif href jpg href jpeg 有没有更有效的方法来使用 jQuery 中的过滤器选择单个属性的多个值 这里我尝试仅选择带有图像作
  • 使用 jQuery 的 javascript 关联数组长度

    我正在使用 javascript 关联数组 例如 var testarray testarray one 1 testarray two 2 testarray three 3 我也在旁边使用jquery 如何使用 jquery 或任何其他
  • 如何使用javascript隐藏div

    我想使用 Javascript 隐藏一个 div 下面是我的div div class ui dialog titlebar ui widget header ui corner all ui helper clearfix span cl
  • jQuery 1.6:backgroundPosition 与 backgroundPositionX 和 FF4 兼容性

    在尝试升级 jQuery 插件 iCheckbox http stackoverflow com questions 6032538 以在 jQuery 1 4 4 之上工作时 我发现使用 animate backgroundPositio
  • 使用jquery和coldfusion cffile上传多个文件

    不是一个真正的问题 只是想将其发布在某个地方 因为我在其他地方找不到它 现在我已经拼凑了一个工作演示 我想我会分享 这在 Coldfusion 和 Railo CFML 服务器上同样有 效 问题是 对于 CFML 开发人员来说 CFFILE
  • 如何使用 jQuery 在 ASP.NET MVC 3 中设置会话变量?

    所以这就是问题 如何使用 jQuery 在 ASP NET MVC 3 中设置 Session 变量 我正在尝试使用 ajax or post但问题是我真的不知道该怎么办 描述 只需发布到控制器并在那里设置会话变量即可 Sample jQu
  • jQuery - 未捕获类型错误:对象 # 没有方法“parent”

    我的代码有问题 Chrome代码光谱仪说第21行有问题 问题如下 Uncaught TypeError Object
  • 右列固定的 Div 表

    我最近接手了一个非营利网站作为一个项目 我正在使用一个现有的网站 所以我必须使用很多已经编程的东西 所以我所要做的就是创建设计 I made a diagram of basically what I can t figure out ho

随机推荐