首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >用于检测项目是否由于滚动而不再可见的Javascript

用于检测项目是否由于滚动而不再可见的Javascript
EN

Stack Overflow用户
提问于 2011-06-08 05:30:30
回答 3查看 2.1K关注 0票数 3

在我的页面顶部有一个javascript幻灯片。当幻灯片切换到下一个图像时,我调用另一个函数来更改页面的背景颜色。

当幻灯片不再在视图中时,即当用户向下滚动页面时,客户端希望背景颜色停止改变。

有没有办法检测元素是否由于滚动而不再可见?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2011-06-08 05:50:28

您可以使用jQuery $.scrollTop函数,可能是从scroll事件处理程序来编写脚本。

票数 1
EN

Stack Overflow用户

发布于 2011-06-08 05:49:25

jQuery中的测试代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function test() {
    var $elem = $('.test');
    var visibleAtTop = $elem.offset().top + $elem.height() >= $(window).scrollTop();
    var visibleAtBottom = $elem.offset().top <= $(window).scrollTop() + $(window).height();
    if (visibleAtTop && visibleAtBottom) {
        alert('visible');
    } else {
        alert('invisible (at ' + (visibleAtTop ? 'bottom' : 'top') + ')');
    }
}

http://jsfiddle.net/9PaQc/1/的完整工作示例(更新:http://jsfiddle.net/9PaQc/2/ )

附注:此选项仅检查垂直滚动。对于水平方向,只需将top替换为leftY -> Xheight() -> width()即可

编辑

通过更改window.scrollY -> $(window).scrollTop()实现了完全jQuery (以确保x-browser兼容性)

票数 4
EN

Stack Overflow用户

发布于 2011-06-08 05:38:31

使用window.pageYOffset确定窗口中的滚动量。使用对象的当前偏移检查对象是否在视图中。请注意,这些值主要取决于浏览器,因此首先检查它是否存在,然后对其执行操作。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6274577

复制
相关文章
用JavaScript检测用户是否在线
有时候,我们需要知道当前网络的状态来做一些事情,以提升用户体验,这节课,我们来看一下,如何使用 JavaScript 来检测用户是否在线。
前端小智@大迁世界
2023/01/06
2.8K0
用JavaScript检测用户是否在线
↓↓↓ HTML如何局部滚动而头尾不滚动 ↓↓↓
兼容 android(4.3版本 三星 note2)进行嵌套,没有引用任何插件,纯css。
White feathe
2021/12/08
3K0
当前页面是否可见
Document.hidden属性来自于浏览器Page Visibility API。
公众号@魔术师卡颂
2020/08/26
2K0
JavaScript 基于offsetHeight和clientHeight判断是否出现滚动条
HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。
授客
2019/11/26
1.3K0
html 检测输入是否数字,JavaScript怎么判断输入是否是数字?
JavaScript进行表单操作时,很多时候需要判断输入的内容是否为数字。JavaScript判断输入内容是否为数字的方法很多,下面本篇文章就来给大家介绍几种方法,希望对大家有所帮助。
全栈程序员站长
2022/09/10
3.9K0
html 检测输入是否数字,JavaScript怎么判断输入是否是数字?
JS判断滚动条是否停止滚动
该文讲述了如何通过JavaScript判断滚动条是否停止滚动,从而解决在数据量较大情况下,频繁向后台发送请求计算数据,造成服务器和浏览器压力过大的问题。具体实现方法是:当滚动条滚动时,发起一个定期执行的方法,并记录一次当前滚动条到顶部的距离。在这个方法中,判断此时滚动条到顶部的距离是否和上次记录的相等,如果相等,那么说明停止滚动了,不相等则还在滚动。这种方法可以设置定时执行的时间,时间越短,响应的越及时,浏览器压力越大;时间越长,响应的越慢,浏览器压力越小。
高爽
2017/12/28
17.4K0
Jenkins检测Maven项目是否引用快照包
生产环境不允许使用快照包,但人为规定终究不如脚本进行检测,所以在打war包,检测是否引用了快照包,如果引用了宣布打包失败
陈不成i
2021/06/03
7030
React技巧之检查元素是否可见
原文链接:https://bobbyhadz.com/blog/react-check-if-element-in-viewport[1]
chuckQu
2022/08/19
1.1K0
Javascript判断设备类型,检测是否为微信打开
代码实现如下 var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE内核 pres
IT工作者
2022/01/28
1.4K0
检测项目中或IPA中是否包含UIWebView
将获取的IPA文件后缀改为rar,然后解压缩会得到一个payload文件夹,里面会有一个后缀为app的文件。同样在终端进入此文件夹:
用户6094182
2020/06/30
2.6K0
检测是否IE
从jQuery的jQuery.browser里面拿出来的,jQuery从1.9开始废弃这个方法,改用jQuery.support来检测浏览器支持的特性。
libo1106
2018/08/08
1K0
offsetWidth是否包括滚动条
关于offsetWidth的基本用法可以参阅js offsetWidth一章节。 下面就通过代码实例验证一下offsetWidth是否包括滚动条的宽度。 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>前端部落</title> <style> #top,#bottom{ width:200px; height:100px; background:red; overflow:auto; margin:
IT工作者
2021/12/29
3710
[KDD | 论文简读] 避免由于节点嵌入中的相似性假设而导致的偏差
Avoiding Biases due to Similarity Assumptions in Node Embeddings
智能生信
2022/12/29
5860
[KDD | 论文简读] 避免由于节点嵌入中的相似性假设而导致的偏差
如何在DataGrid里面产生滚动条而不滚动题头
我们在开发的时候一定遇到,使用DataGrid的时候由于不想分页(数据没有那么多)但是又显示不在一页里面,此时我们希望在DataGrid里面出现一个滚动条,可以上下滚动DataGrid里面的数据而不用上下滚动页面,由于写本文的目的是为了说明如何实现,所以对于细节性的问题读者可以自己思考完成(比如:既要分页又要滚动等等)。为了可以滚动DataGrid我们需要一个可以让客户端的Table滚动js脚本(该js代码我是从CodeProject上面下载的),但又不能滚动Table的题头(也就是第一行)。我们都知道Da
阿新
2018/04/13
1.6K0
上市公司,为什么由于ESD而损失惨重
这是个真实的案例。我们暂且隐去公司的名字,姑且称之为HW公司吧。由于工作原因,笔者亲身经历了这一事件,参与并解决了这一棘手问题。且听我慢慢道来。
用户2366192
2021/05/31
3970
我为什么不再用 Vue,而改用 React?
当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。前端正在走向一个时髦的,流行的,模块化的 JavaScript 框架的新时代。所以我选择了 VueJS。
逆锋起笔
2020/08/05
3.5K0
我为什么不再用 Vue,而改用 React?
[KDD 2022 | 论文简读] 避免由于节点嵌入中的相似性假设而导致的偏差
Avoiding Biases due to Similarity Assumptions in Node Embeddings
智能生信
2022/12/29
3310
[KDD 2022 | 论文简读] 避免由于节点嵌入中的相似性假设而导致的偏差
JavaScript实现竖直文本滚动
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/119017.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/11
6630
带你学开源项目:LeakCanary-如何检测活动是否泄漏
为了简单方便的检测内存泄漏,Square开源了LeakCanary,它可以实时监测活动是否发生了泄漏,一旦发现就会自动弹出提示及相关的泄漏信息供分析。
陈宇明
2020/12/15
7390
带你学开源项目:LeakCanary-如何检测活动是否泄漏
点击加载更多

相似问题

我们如何才能检测到当前视图由于滚动而不可见?

12

检测水平滚动是否可见

20

正在检测滚动条当前是否可见

10

检测用于滚动位置javascript的值

13

如何检测控件何时不再可见?

34
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文