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

是否有一个事件触发jQuery中scrollHeight或scrollWidth的更改?

是的,有一个事件可以触发jQuery中scrollHeight或scrollWidth的更改。这个事件叫做“DOMSubtreeModified”事件。当DOM树中的元素发生任何结构性变化时,这个事件就会被触发。

例如,当一个元素的子元素被添加或删除,或者元素的内容发生变化时,都会触发DOMSubtreeModified事件。您可以使用这个事件来监视scrollHeight或scrollWidth的变化,并执行相应的操作。

需要注意的是,DOMSubtreeModified事件已经被废弃了,因此不建议在新的项目中使用。您可以考虑使用MutationObserver API来代替DOMSubtreeModified事件。MutationObserver API可以观察DOM的变化,并在变化发生时执行回调函数。

以下是一个使用MutationObserver API来监视scrollHeight或scrollWidth变化的示例代码:

代码语言:javascript
复制
var targetNode = document.getElementById('someElement');
var observer = new MutationObserver(function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
});
var config = { attributes: true, childList: true, subtree: true };
observer.observe(targetNode, config);

在这个示例中,我们首先获取了需要监视的元素,并创建了一个MutationObserver实例。然后,我们定义了一个回调函数,该函数将在DOM发生变化时被执行。最后,我们使用observe()方法来启动监视。

在回调函数中,我们可以检查mutationsList参数,该参数是一个MutationRecord对象的数组,其中包含了所有发生的变化。我们可以遍历这个数组,并检查每个MutationRecord对象的type属性,以确定哪些变化发生了。如果type属性的值为'childList',则表示子元素发生了变化;如果type属性的值为'attributes',则表示元素的属性发生了变化。

通过使用MutationObserver API,您可以更有效地监视scrollHeight或scrollWidth的变化,并执行相应的操作。

相关搜索:未在包装的telerik组件中触发Jquery更改事件如何在特定选项的select值未更改或更改为特定选项时使用Jquery触发事件是否有一个在实体初始化后触发的-frame事件?是否可以在列表中的背景图像上触发jQuery单击事件?JQuery是否有办法取消随机HTML字符串中的事件绑定?在Cordova中是否有应用程序即将卸载或更新的事件?是否有一个事件可以知道DatagridTemplateColumn组合框中的isEditable属性是否更改,以便在isEditable更改时重置selected值是否有一个插件或jquery滑块的示例使用非均匀可分的值?是否有一个通用的窗口事件,当一个文件被保存时被触发(除了FileSystemWatcher类)如何从另一个类中一个类的属性更改中触发事件?React/Vanilla JavaScript:当使用onChange事件产生文本区的行或行时,事件对象上是否有一个属性?是否有一个特征可以从stdin或rust中的文件中读取?是否有可用的事件( xamarin或特定于平台的)可用于监听用户在设备时间上的任何更改?比较两个txt.files的内容是否有删除的行或python中的更改在大型web表单中,是否可以为每个输入字段的更改触发一个查询?在ace编辑器的自动完成弹出列表中是否有任何'Click‘或'Enter’事件?是否有一个属性将类或方法标记为.NET中的线程安全?MVC 5视图或jquery中是否存在在加载部分视图且其元素可访问时引发的事件在woocommerce中是否有一个过滤器或钩子来更改WC_Tax::get_rate_label( $key )?当你删除()一个元素并在其他地方附加()时,jQuery中的事件是否会丢失?
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript基础学习--零碎

offsetHeight:内容高度+padding高度+边框宽度  ,jQueryouterHeight()方法返回就是这个高度 注意:用document.getElementById('bottom...DOM上某个事件时候会产生一个事件对象event,这个对象包含着所有与事件有关信息,包括产生事件元素、事件类型等相关信息,思路一divclick事件处理程序传入参数就是这个event对象。...访问IEevent对象几种不同方式,取决于指定事件处理程序方法。直接为DOM元素添加事件处理程序时,event对象作为window对象一个属性存在。 ...event对象包含了一个重要属性:target(W3C)/srcElement(IE),这个属性标识了触发事件原始元素,思路二就是要利用这个属性。...可以直接对documentclick事件绑定事件处理程序,在事件处理程序判读事件是否为id==testdiv元素其子元素,如果是则方法return不做操作,如果不是则隐藏该div。

1K70

一文彻底搞懂js位置计算

' | 'auto' // 平滑滚动还是默认直接滚动 } 复制代码 Element.scrollHeight/scrollWidth Element.scrollHeight 这个只读属性是一个元素内容高度度量...在实际工作如果对于滚动操作很频繁需求,个人建议去使用better-scroll,它是一个移动/web端通用js滚动库,内部是基于元素transform去操作滚动并不会触发相关重塑/回流。...例如,不论页面是否垂直/水平滚动,当你点击客户端区域左上角时,鼠标事件 clientX/Y 值都将为 0 。...注意是触发元素也就是 e.target,额外小心如果事件对象存在从一个子元素当移动到子元素内部时,e.offsetX/Y 此时相对于子元素左上角偏移量。...返回style是一个实时 CSSStyleDeclaration 对象,当元素样式更改时,它会自动更新本身。

3.8K10
  • 【JS】328- 8个你不知道DOM功能

    ('click',doSomething,false); 第一个元素是我们要监听事件,第二个元素是事件触发回调函数,第三个参数是一个布尔值用来标识事件在捕获还是冒泡阶段触发。...(最好是一个大数),并且更改 options 选项框里值 smooth auto (这也是 behaviro 属性唯一两个选项)。...如前所述,也可以通过复选框组来完成,尝试更改HTML默认选中选项,然后重试按钮。...我将 blur 和 focus 包括在内,以证明这些不符合条件,并且始终返回0(即不单击) 像IE11这样老浏览器非常不一致行为 请注意,该演示包含了一个很好用例,用于演示-模拟三次单击事件能力...ScrollHeightScrollWidth 属性 ScrollHeightScrollWidth 属性听起来可能很熟悉,因为您可能会将它们与宽度和高度相关 DOM 特性混淆。

    1.4K10

    js、jQuery 获取文档、窗口、元素各种值

    ; 滚动条内容高度:boxx.scrollHeight;//利用这个可以使滚动条一直在底部 网页正文部分上: window.screenTop; 网页正文部分左: window.screenLeft...在当前触发鼠标事件元素和它祖先元素中找到最近具有定位属性元素,计算鼠标与其偏移值, 以找到元素border左上角外交点作为相对点。...另外offsetY并不在乎触发事件元素是否定位属性,它总是相对于触发事件元素来计算偏移值。...鉴于layerY和offsetY不同,要兼容使用二者要注意   1.触发事件元素一定要设置定位属性。   ...2.在元素具有上边框border-top情况下, layerY比offsetY值多一个border-top宽度值。

    14.1K32

    JSclientHeight、scrollHeight和offsetHeight大坑,滚动条抖动问题解决

    其中clienHeight、scrollHeight和offsetHeight一般用来求网页内容高度,而对应clientWidth、scrollWidth和offsetWidth则用来求网页内容宽度...简单来说:在网页盒子模型一个元素由内到外分别由 height + padding + border + margin组成,而clientHeight只取前面的height和padding。...什么意思呢,让我们来看一个例子: 可以看到,在用scrollHeight获取可滚动内容高度时有这么一个坑,那就是当你不希望定位后代元素被计算入滚动总高度时候,使用scrollHeight...本来想着用盒子scrollHeight去获取内容高度,但是却导致了滚动条抖动问题,原因是我让定位后代元素随着滚动高度而改变位置和高度,导致scrollHeight获取到值发生改变,频繁地触发滚动条刷新...兴趣小伙伴可以自己去试一下。

    5.9K10

    8 个 DOM 功能

    第三个参数是一个名为 useCapture 布尔值,用于指示是否要使用事件冒泡捕获【https://www.sitepoint.com/event-bubbling-javascript/】。...这肯定会在很多情况下派上用场,并且无需用 removeEventListener() 使用其他一些复杂技术来强制单个事件触发器。...如果你用过 jQuery,可能熟悉该库类似功能:.one() 方法。...可以通过修改代码数字更改值。 至于浏览器支持,似乎在兼容性上有些小问题,不过看上去现在几乎所有还在使用浏览器都支持可选参数功能,包括 IE10。...scrollHeightscrollWidth 属性 scrollHeightscrollWidth 属性可能听起来很熟悉,因为你可能会将它们与其他与宽度和高度相关 DOM 功能混淆。

    1.8K20

    在FineReport中使用JS实现点击决策报表实现全屏效果

    昨天给我提了一个需求,将大屏界面嵌到目前系统里,加一个全屏功能。...因为大屏界面是使用决策报表制作,所以我本来打算从报表本身入手,添加一个按钮可以全屏与退出全屏,可是这多出来一个按钮在报表界面实在太过突兀,没办法只好考虑其他方式。...在搜索文档过程一种解决方案是通过鼠标单击报表界面实现全屏与退出全屏,高度符合我需求,于是乎就使用这样方法了。...在设计器打开决策报表,右边组件设置中选择‘body’,然后选“事件-添加事件-点击”,如下图所示: [添加事件] 随后点击铅笔图标,将以下代码复制进去: var docElm = document.documentElement...: [最终效果] 后来完成后又说只需要单击全屏,不能单击退出全屏以防误触,经过对代码观察,我更改了if (document.body.scrollHeight === window.screen.height

    3.5K30

    JS常用代码块

    设置给任何层添加事件触发调用对象层内容 function showid(idname){ var newBox=document.getElementById(idname); console.log...) 网页可见区域高:document.body.offsetHeight (包括边线宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight...屏幕可用工作区宽度:window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight...scrollLeft:设置获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...console.log(Request("a")); console.log(Request("b")); console.log(Request("c")); 6. div已经一个

    3.2K31

    DOM 和 BOM 各种宽高属性

    先区分一下 window 对象和 document 对象: window 对象表示浏览器打开窗口,而 document 对象表示整个 html 文档,它是 window 对象一部分。.../scrollHeight: 对于 body 元素,在没有滚动条情况下: body.scrollWidth = window.innerWidth - scrollBar body.scrollHeight...= window.innerHeight - scrollBar 在有滚动条情况下: body.scrollWidth = width + padding + border + margin body.scrollHeight...= height + padding + border + margin 对于其他元素,在没有滚动条情况下: element.scrollWidth = element.clientWidth element.scrollHeight...element.style.property/element.getBoundingClientRect().property;: 对于一个 dom 元素,它 style 属性返回一个属性可读写对象

    1.9K10

    前端性能优化

    offsetTop、offsetLeft、 offsetWidth、offsetHeight、 scrollTop、scrollLeft、scrollWidthscrollHeight、 clientTop...事件节流(throttle)和防抖(debounce) 比如窗口scroll和resize事件,一旦激活,会频繁触发相应事件函数。频繁触发回掉函数导致大量计算可能引发页面抖动甚至卡顿。...为了规避这些风险,我们会采用事件节流或者防抖,来降低函数触发频率。 节流:当事件第一次被触发时,在指定时间内,无论再次触发多少次,都会被忽略。也就是说,以第一次事件为准。...防抖:事件触发后,会延迟执行,在延迟时间内,如果事件再次被触发,上一次事件被取消,以当次为准,重新延迟执行。也就是说,以最后一次事件为准。....} // 不推荐 // 浏览器会先查找所有的a标签,然后再找这些a标签哪些span父标签... div span a {...}

    90130

    Merit价值和成果管理系统——1侧栏与iframe

    应该是前天晚上到凌晨,总算搞定了一个小小功能。...著名ztree树状菜单拥有a href=***,target=“iframename”,就是这个ztree作为树状侧栏放在左侧,在它上面点击一个链接,就可以 在右侧iframe里打开一个页面。...:用事件event功能,当点击一个nodes,触发这个event,然后这里面就可以写逻辑代码,比如,指定在iframe里打开指定页面。...那剩下就提取这个data里部门id或者人员id就可以打开部门人员业绩情况了。 另外一个就是jquery如何开某个网页显示在iframe里。就是这句就行了。...= null) { ifm.height = subWeb.body.scrollHeight; ifm.width = subWeb.body.scrollWidth; } } 点击部门右侧

    50420

    JavaScript开发几个常用知识点总结

    前言   最近在做项目的时候自己写了一些JavaScipt代码,于是自己又进行简单查阅资料整理了一下,发现了如下几个比较有用知识点:   1、三种声明函数方式   2、jQuery $(document...).ready() 与window.onload区别   3、location.href   4、获取url参数   5、判断是否存在函数方法   6、设置Iframe高度   7、解决文本框设置只读后按退键后退页面...在HTMLIframe标签中加入一个onload事件,就是在Iframe页面加载完毕时进行计算设置高度。...7、解决文本框设置只读后按退键后退页面  解决方法就是定义一个全局document.documentElement.onkeydown事件,来检测页面每次按键按下时操作 document.documentElement.onkeydown...,如果您对我博客所讲述内容兴趣,那不妨点个推荐吧,谢谢支持:-O。

    48651

    scrollwidth和clientwidth_vue监听页面滚动

    scrollLeft:设置获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...offsetTop 与 offsetParent 很复杂,不同浏览器不同解释,浮动一下解释又不同了,所以我们一般只要理解通过二者可以获得控件在浏览器绝对位置即可。...clientHeight 大家对 clientHeight 都没有什么异议,都认为是内容可视区域高度,也就是说页面浏览器可以看到内容这个区域高度,一般是最后一个工具条以下到状态栏以上这个区域...说明 以上基于 DTD HTML 4.01 Transitional,如果是 DTD XHTML 1.0 Transitional 则意义又会不同,在 XHTML 这三个值都是同一个值,都表示内容实际高度...上述 p scrollHeight 为 300,而 p offsetHeight 为 100。 scrollWidth 也是类似道理。

    1.8K10

    javascript坐标:event.x、event.clientX、event.offsetX、event.screenX 用法

    clientY 设置获取鼠标指针位置相对于窗口客户区域 y 坐标,其中客户区域不包括窗口自身控件和滚动条。 offsetX 设置获取鼠标指针位置相对于触发事件对象 x 坐标。...offsetY 设置获取鼠标指针位置相对于触发事件对象 y 坐标。 screenX 设置获取获取鼠标指针位置相对于用户屏幕 x 坐标。...3 按左右键 4 按中间键 5 按左键和中间键 6 按右键和中间键 7 按所有的键 cancelBubble 设置检索当前事件是否事件句柄起泡 可能值: false 启用起泡 true...检索数据源对象默认记录集引用 该特性为只读 repeat 检索一个事件是否被重复 该属性只有在onkeydown事件重复时才返回true returnvalues 设置检索从事件返回值...srcUm 检索触发事件行为同一资源名称 除非下面两个条件都为真,否则该特性被设置为null 1.行为被附加到触发事件要素上 2.在前面的项目符号定义行为己指定了一个URN标识符和己触发事件

    1.7K30
    领券