首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

查找在运行时当前处于滚动状态的div。-Safari

在运行时查找当前处于滚动状态的div,可以通过以下步骤实现:

  1. 获取所有的div元素: 使用DOM操作方法,如document.getElementsByTagName("div"),获取页面中所有的div元素。
  2. 遍历div元素列表: 使用循环遍历获取到的div元素列表。
  3. 判断div元素的滚动状态: 通过判断元素的scrollTop属性和scrollHeight属性,确定div是否处于滚动状态。
    • scrollTop属性表示元素被卷起的部分的高度,如果为0则表示元素未滚动。
    • scrollHeight属性表示元素内容的总高度,如果scrollHeight大于元素的实际高度,则表示元素处于滚动状态。
  • 获取滚动状态的div: 如果找到了处于滚动状态的div元素,则将其保存到一个变量中。

以下是示例代码:

代码语言:txt
复制
// 获取所有的div元素
var divElements = document.getElementsByTagName("div");

// 存储滚动状态的div
var scrollingDiv = null;

// 遍历div元素列表
for (var i = 0; i < divElements.length; i++) {
  var div = divElements[i];

  // 判断div元素的滚动状态
  if (div.scrollTop > 0 && div.scrollHeight > div.offsetHeight) {
    // 找到了处于滚动状态的div元素
    scrollingDiv = div;
    break; // 如果只需找到第一个滚动状态的div,可以使用break语句提前结束循环
  }
}

// 输出滚动状态的div
if (scrollingDiv) {
  console.log("找到滚动状态的div:", scrollingDiv);
} else {
  console.log("未找到滚动状态的div");
}

这是一个通用的方法,适用于大多数现代浏览器,包括Safari浏览器。对于特定的应用场景,可以根据实际需求进行优化和定制。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Window对象

Window对象 window作为全局变量,代表了脚本正在运窗口,将属性与方法暴露给JavaScript。 Window对象属性 closed: 表示所引用窗口是否关闭。...frames: 返回一个类数组对象,列出了当前窗口所有直接子窗口。 fullScreen: 这个属性表明了窗口是否处于全屏模式下。 history: 提供了操作浏览器会话历史接口。...self: 返回对当前窗口引用。 status: 设置窗口状态文本。 top: 返回窗口层级最顶层窗口引用。...moveTo(): 把open创建窗口左上角移动到一个指定坐标。 open(): 打开一个新浏览器窗口或查找一个已命名窗口。 postMessage: 可以安全地实现跨源通信。...onerror: 当发生JavaScript运行时错误与资源加载失败时触发。 onabort: 发送到window中止abort事件事件处理程序,不适用于Firefox 2或Safari

2.4K20

m001mac初级篇之常用快捷键

截取所选屏幕区域到一个文件,或按空格键仅捕捉一个窗口 Command-Shift-Control-4:截取所选屏幕区域到剪贴板,或按空格键仅捕捉一个窗口 在应用程序中 Command-H:隐藏(Hide)当前在运应用程序窗口...向上滚动一页(Page Up) fn-下箭头:向下滚动一页(Page Down) fn-左箭头:滚动至文稿开头(Home) fn-右箭头:滚动至文稿末尾(End) Command-右箭头:将光标移至当前行尾...:将文件移至废纸篓 Command-Shift-Delete:清倒废纸篓 空格键:快速查看选中文件,也就是预览功能 在safari浏览器补充 上下方向键 小范围垂直滚动页面 左右方向键 小范围水平滚动页面...Cmd-Shift-回车 在新窗口或者标签打开搜索结果 Safari快捷键:菜单快捷键 Cmd-A 全选 Cmd-B 显示/隐藏收藏栏 Cmd-D 添加书签 Cmd-E 使用所选进行查找 Cmd-F...查找 Cmd-G 再次查找 Cmd-H 隐藏 safari Cmd-J 跳到所选 Cmd-K 拦截弹窗 Cmd-L 打开地址栏(转到) Cmd-M 最小化 Cmd-N 新建窗口 Cmd-O

1.5K80
  • 滚动怎么理解_scrollview不滚动

    但是由于各个浏览器表现不一样,分为以下几种情况   【1】html元素没有滚动条时,IE和firefoxclient和scroll属性始终相同,且返回可视区尺寸大小;而safari和chrome表现正常...方法滚动当前window中显示文档,x和y指定滚动相对量 ...如果为true,表示元素顶部与当前区域可见部分顶部对齐(前提是当前区域可滚动);如果为false,表示元素底部与当前区域可见部分尾部对齐(前提是当前区域可滚动)。...如果当前元素在视口中可见,这个方法什么也不做   如果将可选alignCenter参数设置为true,则表示尽量将元素显示在视口中部(垂直方向)   [注意]该方法只有chrome和safari支持...,具体高度由元素高度决定   [注意]该方法只有safari支持 <div id="test" style="width: 100px;height: 100px;padding: 10px;margin

    1.9K20

    实现滚动时Header自动隐藏

    这样,header显示和隐藏就实现了,接下来就是检测滚动方向。...、滚动状态(到顶部/到底部)和是否在滚动 其中,函数返回 directions 是一个 reactive 对象,我们对其进行监听,当该变量发生变化时,说明滚动方向发生了改变。...,这是为了避免iOS设备中safari浏览器橡皮筋效果导致误判 所以为什么 safari 橡皮筋效果也会触发scroll事件啊啊啊啊啊!!!...前者,可以通过判断y值是否为0(或小于0)来实现;而后者,正常来说,滚动到底部时,文档高度-视窗高度应该和滚动y值是一致。...但是在safari里可能不一致,在safari中,当地址栏收缩时,上文公式成立;但是当地址栏是展开状态时,两者会一个相差地址栏高度。而地址栏是否展开我没找到判断方法。

    2.3K30

    初探富文本之基于虚拟滚动大型文档性能优化方案

    当然上边只是我对于提升文档编辑时或者说运行时性能思考,实际上关于虚拟滚动优化性能点在社区上有很多讨论了。...虚拟滚动实现方式本质上就是在用户滚动视图时,根据视口高度、滚动容器滚动距离、行高度等信息计算出当前视口内需要渲染行,然后在视图层根据计算状态来决定是否要渲染。...然后根据当前视口信息来设置状态,如果当前节点是进入视口状态我们就将节点状态设置为viewport,如果此时是出视口状态则需要二次判断当前状态,如果不是初始loading状态则可以直接将高度与placeholder...在前边提到过,我们当前关注是主文档直属块管理,那么对于嵌套结构来说,当直属块处于占位状态时,我们需要将其内部所有嵌套块都设置为占位状态。...内核Chrome与Safari浏览器,Chrome就支持overflow-anchor而Safari就不支持。

    22310

    长篇总结之JavaScript,巩固前端基础

    错误处理 Chrome DevTools基本使用 语法错误:不符合js语法错误。 运行时错误,代码没有语法错误,但是在运行时发生错误。 如何区分语法错误与运行时错误 语法错误是不可能运行成功。...运行时错误是有可能运行成功。 逻辑错误 什么是逻辑错误?就是指计算结果很想象不一样。...document.compatMode 滚动到指定位置 scroll(x,y) scrollTo(x,y) scrollBy(x,y); 节点查找querySelector()和querySelectorAll...defaultStatus设置或返回窗口状态栏中默认文本。 document对 Document 对象只读引用 frames返回窗口中所有命名框架。...,栈中只有一个上下文是处于活动状态,执行全局代码时就会有一个全局上下文被压入栈,调用一个函数时就会产生一个函数上下文环境,然后将其压入栈 js作用域 - 词法作用域 js作用域是词法作用域(静态作用域

    68820

    CSS深入理解学习笔记之overflow

    滚动宽度机制:     滚动条会占用容器可用宽度或高度。 ?...③transform声明当作包含块:ⅰoverflow元素自身transform(仅支持:IE9+/FireFox);ⅱoverflow子元素transform(支持IE9+/FireFox/Chrome/Safari...> 30 31 32 5、依赖overflow样式表现   CSS3resize属性,起作用前提是overflow不能是visible。   ...(2)锚点定位本质     在页面可滚动容器中,通过锚链滚动到其对应锚点元素,即改变容器滚动高度。     前提:①容器可滚动;②锚点元素在容器内。   ...(3)锚点定位触发     ①url地址中锚链与锚点元素;     ②可focus锚点元素处于focus状态;   (4)锚点定位作用     ①快速定位     ②选项卡技术     ③单页应用

    4.1K50

    任务,微任务,队列和时间表

    这就是为什么promise1并promise2在之后记录日志原因script end,因为当前在运脚本必须在处理微任务之前完成。...查看日志何时相对于promise&出现setTimeout,尽管您依靠是正确实现。 确定方法是查找规格。...类似地,ECMAScript对此作业说: 仅当没有正在运执行上下文并且执行上下文堆栈为空时才可以启动作业执行。...当IDB触发成功事件时,相关事务对象在分派后变为非活动状态(步骤4)。...如果我创建了一个在事件触发时解决Promise,则回调应在事务仍处于活动状态时在第4步之前运行,但是在Chrome以外其他浏览器中不会发生,这会使库有点用。

    2.2K20

    何为 content-visibility?

    基于这种场景,content-visibility: auto 就应运而生了,它允许浏览器对于设置了该属性元素进行判断,如果该元素当前处于视口内,则不渲染该元素。...那么实际滚动效果,滚动条就是抖动: 所以,我们可以同时利用上 contain-intrinsic-size,如果能准确知道设置了 content-visibility: auto 元素在渲染状态高度.../div> 相应设置下 CSS: .paragraph, .g-img { content-visibility: auto; } 当刷新页面的时候,观察网络请求(Network)状况: 即便当前页面可视区域外内容未被渲染...CSS: .paragraph, .text { content-visibility: auto; } 好,如此一来,在页面刷新后,第二个 .text 是处于未被渲染状态,我们试着全局 ctrl...+ F 查找一下,看看能找到几个: 很有意思现象,全局查找时候,可以找到当前未被渲染元素内内容。

    1.6K10

    iScroll5 表单元素无法失焦 解决方法

    代码解释:在文本框当中输入了HTML5学堂之后,再点击其他位置,当前文本框并不能失焦。 这个问题当时让自己实在是有些头疼。...后来自己翻阅了iScroll5文档,还是没有找到相关解决办法(如果各位有查找到解决办法,欢迎沟通交流)。于是,就只能另辟蹊径,解决这个问题了。...第一想到其实就是事件委托,将事件绑定在body身上,然后进行判断点击元素类型/元素名称,只要不是input就让原来表单元素失焦(如果滚动区域中有两个input,一个input处于聚焦状态时候,点击另外一个... 表单元素处于滚动区域 ...另外,在使用console.log去打印e.target时候,很奇怪是,input类元素被点击进入聚焦状态时候,并不会触发body元素上点击事件,具体原因还有待研究。

    1.3K90

    DOM滚动

    DOM规范中并没有规定各浏览器需要实现怎样滚动页面区域,各浏览器实现了相应方法,可以使用不同方式控制页面区域滚动。这些方法作为HTMLElement类型扩展存在,所以它能在所有元素上使用。...1、scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗可见范围看见当前元素。...-------目前各浏览器均支持 2、scrollIntoViewIfNeeded(alignCenter) 只在当前元素在视窗可见范围内不可见情况下,才滚动浏览器窗口或容器元素,最终让当前元素可见...将元素内容滚动指定行数高度,lineCount值可以为正值或是负值。...---Safari、Chrome实现了这个方法 4、scrollByPages(pageCount) 将元素内容滚动指定页面的高度,具体高度由元素高度决定。

    80510

    从零开始学 Web 之 CSS3(六)动画animation,Web字体

    在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式动画效果。 使用 @keyframes关键字来创建动画。...*/ animation-delay: 2s; /*5.设置动画结束时状态:默认情况下,动画执行完毕之后,会回到原始状态 forwards:会保留动画结束时状态,在有延迟情况下,并不会立刻进行到动画初始状态...backwards:不会保留动画结束时状态,在添加了动画延迟前提下,如果动画有初始状态,那么会立刻进行到初始状态 both:会保留动画结束时状态,在有延迟情况下也会立刻进入到动画初始状态*/...> 1、将要显示图片复制一份,以完成无缝滚动需求。...SVG字体渲染一种格式,支持这种字体浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+ 3、使用步骤 需要注意是,我们在使用 Web

    1.4K10

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

    首先需要根据文章内容二级和三级标题生成目录; 然后,页面从上到下滚动过程中,需要在右侧目录里高亮当前标题,而高亮原则是当前标题所在位置到浏览器可视区域顶部距离需要小于或等于一个固定值,如上图所示...; 在合适时候滚动目录列表,使得当前高亮子目录会出现在滚动区域内部,且尽量处于滚动区域中间区域; 当点击某个子目录时候需要高亮当前点击目录,且文章内容滚动到对应目录位置,使得点击目录对应文章标题所在位置距离可视区域顶部距离刚好等于一个固定值...根据之前需求分析里说明,我们可以知道当浏览器向下滚动时候,会分成 3 种情况: 滚动高亮子目录处于滚动区域上半部分,即中位线以上,此时目录不进行滚动,如上图 ①; 滚动高亮子目录处于滚动区域下半部分...,即中位线以下,此时目录滚动距离将是滚动后高亮子目录底部位置到中位线高度差,如上图 ②; 滚动高亮目录处于中位线以下且最后一个子目录需要贴着滚动区域底部,此时目录滚动距离将是滚动列表底部到滚动区域底部高度差...好了,对于 requestAnimationFrame 介绍就到这里,下面我们直接来说下动画实现滚动核心原理: 每次滚动距离 = ( 滚动距离 / 动画持续时间 ) * 每次动画执行时间距离第一次执行时差值

    2.4K20

    如何渲染几万条数据并不卡住界面

    因为浏览器视窗就这么高,我们能在用户滚动时动态替换当前视窗内容,所以页面能始终保持少量节点,进而实现一个虚拟滚动列表。...+ this.remain // 计算显示范围 } 还需要两个变量start/end记录当前视窗展示列表范围。...height: this.size, top: index * this.size, bottom: (index + 1) * this.size })) } } 当滚动时根据滚动条高度计算出当前处于哪一个项目...this.positions[this.start - this.prevCount].top : 0 } } 由于positionstop/bottom是根据索引算且是有序递增,所以算出开始位置可以根据二分查找算法...对二分算法不了解,前往详解二分查找查看 getStartIndex(value) { let start = 0 let end = this.positions.length let temp

    61110

    学用Hooks写React组件——基础版移动端无缝轮播图组件

    文字描述不好理解,还是看图说话吧: 实现 布局 先创建一个外层包裹容器,也就是可视区容器,然后使用一个包裹容器把所有的轮播子组件进行包裹,之后轮播图滚动都是控制包裹容器位置来进行切换。.../index.css'; const Carousel = ({children, selectedIndex = 1}) => { // 当切换时候,改变就是当前位置状态 //...; // 切换前先把动画参数打开 container.current.style.transitionProperty = 'all'; // 修改状态为进行时...,不允许切换 if (status === 2) return; // e.eventType 判断当前状态 // INPUT_MOVE 移动中...总结 到这里,一个简易版移动端手势滚动组件就完成了,里面还有很多不足、功能缺陷和优化点,例如容器宽度和高度判断,宽度直接取得手机宽度,高度我直接写死;轮播子组件懒加载等等,之后也会慢慢进行增强和优化

    3.9K20

    python爬虫系列之数据存储实战:爬取简书用户文章列表并保存

    实际上简书在这里使用了懒加载,当你向下滚动页面时会自动加载下一页,每次加载9篇文章,所以在上次例子中一个请求就获取到了我全部文章。 那怎么办呢?...order_by=shared_at&page=1' #其中order_by是排序方式,这个不用管 #page是当前页数 #3313b20a4e25是一个类似用户 id字符串,每个账号都不同 #可以从主页链接中提取出来...观察一下发现当我们在文章栏目下,也就是页数小于 14时候,文章标签是激活,而当我们在动态栏目下时,动态标签是激活(动态两个字下有一个横杠,表示处于激活状态)。...显然在这两个之间同时只能有一个处于激活状态,所以我们可以通过查看文章标签状态来判断是否爬取完成。 但是... .......(简直被自己蠢哭(;´д`)ゞ) 二、代码实现 分析结束,下面看代码部分: 我们先定义一个生成器,接受简书用户唯一标识符,先获取用户当前文章数,然后通过文章数计算出页面数,再根据页面数来生成对应用户文章列表链接

    1.8K40

    10-移动端开发教程-移动端事件

    PC端事件在移动端兼容问题 1.1 click事件200~300ms延迟问题 由于移动端默认布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来大小,Safari最新引入了双击缩放功能...:用户双击手机页面的时候,浏览器会智能缩放当前页面到原始大小。 ​...touchcancel 事件,则应该把游戏当前状态相关一些数据保存起来。 3. 触摸事件对象 TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)状态变化事件。...TouchEvent.touches: 一 个 TouchList 对象,包含了所有当前接触触摸平面的触点 Touch 对象,无论它们起始于哪个 element 上,也无论它们状态是否发生了变化。...不会包括左边滚动距离。 5. clientY 触摸点相对于浏览器 viewport上边缘 y 坐标。不会包括上边滚动距离。

    6.8K80

    JavaScript事件

    是从外往里逐个触发 当点击了元素,按照如下方式触发click事件 document->html->body->div 注意:IE9,Safari,Chrome,Opera,Firefox...,因此这个时候时间处理程序是在元素作用域中运行,this指向当前元素。...eventPhase Integer 调用事件处理程序阶段;1,捕获 2,处于目标 3,冒泡 target Element 事件真正目标 type String 事件类型,需要一个函数处理多个事件时...>)中一个或多个字符时 resize 当浏览器窗口被调整到一个新高度或者宽度时,会触发 scroll 当用户滚动滚动元素中内容时,在该元素上触发resize,scroll会在变化期间重复被激发...0表示主鼠标按钮 1表示中间滚动按钮 2表示次鼠标按钮 5.

    1.4K30
    领券