柞水县住房和城乡建设局网站,四川省造价工程信息网,海口网站运营托管费用,旅游网站建设步骤有时候我们会遇到监听iframe或document的滚动事件不起作用的情况#xff0c;在排除代码写错的情况下#xff0c;我们应该考虑此时的document是否可以滑动。
1、为什么document不能监听滑动?
就很奇怪#xff0c;明明页面时有滚动条的#xff0c;为什么说document不可滑动…有时候我们会遇到监听iframe或document的滚动事件不起作用的情况在排除代码写错的情况下我们应该考虑此时的document是否可以滑动。
1、为什么document不能监听滑动?
就很奇怪明明页面时有滚动条的为什么说document不可滑动呢 因为有的document.scrollingElement本身就不可滑动可滑动的是它的子元素而不document.scrollingElement本身document.scrollingElement本身没有溢出问题它的子元素有溢出问题并产生的scrollbar 展示document不能滚动的DEMO
!DOCTYPE html
htmlheadmeta charsetutf-8 /titledocument不能滑动滑动的是它的子元素/titlestylehtml,body {padding: 0;margin: 0;}/style/headbodydiv stylewidth: 100%;height: 100vh;overflow: auto;h1这是1号标题/h1p这是一个段落。/pp这是一个段落。/pp这是一个段落。/ph2这是2号标题/h2p这是一个段落。/pp这是一个段落。/pp这是一个段落。/ph3这是3号标题/h3p这是一个段落。/pp这是一个段落。/pp这是一个段落。/ph4这是4号标题/h4p这是一个段落。/pp这是一个段落。/pp这是一个段落。/ph5这是5号标题/h5p这是一个段落。/pp这是一个段落。/pp这是一个段落。/ph6这是6号标题/h6p这是一个段落。/pp这是一个段落。/pp这是一个段落。/p/div/bodyscriptwindow.onload function() {document.onscroll function() {//获取滚动条的位置var scrollTop document.documentElement.scrollTop ||document.body.scrollTop;console.log(滚动条的位置, scrollTop);};};/script/html2、什么是document.scrollingElement scrollingElementDocument 的只读属性返回滚动文档的 Element 对象的引用。在标准模式下这是文档的根元素 document.documentElement。 当在怪异模式下scrollingElement 属性返回 HTML body 元素若不存在返回 null。 3、为什么要有document.scrollingElement
众所周知获取浏览器高度是有兼容的当我们需要设置滚动条的位置时一般情况下
document.documentElement.scrollTop 100; // PC端
document.body.scrollTop 100; // 移动端
当有了document.scrollingElement后我们就不需要处理兼容问题了两端通用
document.scrollingElement 100; // 两端通用
4、用js代码测试元素是否可滑动
// 判断是否可滑动
function isScrollable(ele) {const hasScrollableContent ele.scrollHeight ele.clientHeight;const overflowYStyle window.getComputedStyle(ele).overflowY;const isOverflowHidden overflowYStyle.indexOf(hidden) ! -1;return hasScrollableContent !isOverflowHidden;
}
5、监听iframe的滚动案例
5.1 document可滑动
demo.html
!DOCTYPE html
htmlheadmeta charsetutf-8 /titleiframe或document监听滚动事件/title/headbodyiframe idmyframeId src./iframe.html width90% height200pxp你的浏览器不支持iframes。/p/iframe/bodyscript// 判断是否可滑动function isScrollable(ele) {const hasScrollableContent ele.scrollHeight ele.clientHeight;const overflowYStyle window.getComputedStyle(ele).overflowY;const isOverflowHidden overflowYStyle.indexOf(hidden) ! -1;return hasScrollableContent !isOverflowHidden;}window.onload function() {let result isScrollable(document.scrollingElement);console.log(demo是否可滑动, result)var frameWidow document.getElementById(myframeId).contentWindow;console.log(frameWidow);// 两端通用// frameWidow.document.scrollingElement.scrollTop 100// 适用PC端// frameWidow.document.documentElement.scrollTop 200// 适用移动端// frameWidow.document.body.scrollTop 300// scrollTo()方法frameWidow.scrollTo(0, 400)//监听frameWidow.onscroll function() {//获取滚动条的位置var scrollTop frameWidow.document.documentElement.scrollTop ||frameWidow.document.body.scrollTop;console.log(frame滚动条的位置, scrollTop);// window.pageYOffset (支持IE9)// var scrollTop frameWidow.pageYOffset;// var scrollTop frameWidow.document.scrollingElement.scrollTop;};};/script/htmlframe.html
!DOCTYPE html
htmlheadmeta charsetutf-8 /titleiframe或document监听滚动事件/titlestylehtml,body {padding: 0;margin: 0;}/style/headbodyh1这是1号标题/h1p这是一个段落。/pp这是一个段落。/pp这是一个段落。/ph2这是2号标题/h2p这是一个段落。/pp这是一个段落。/pp这是一个段落。/ph3这是3号标题/h3p这是一个段落。/pp这是一个段落。/pp这是一个段落。/ph4这是4号标题/h4p这是一个段落。/pp这是一个段落。/pp这是一个段落。/ph5这是5号标题/h5p这是一个段落。/pp这是一个段落。/pp这是一个段落。/ph6这是6号标题/h6p这是一个段落。/pp这是一个段落。/pp这是一个段落。/p/bodyscript// 判断是否可滑动function isScrollable(ele) {const hasScrollableContent ele.scrollHeight ele.clientHeight;const overflowYStyle window.getComputedStyle(ele).overflowY;const isOverflowHidden overflowYStyle.indexOf(hidden) ! -1;return hasScrollableContent !isOverflowHidden;}window.onload function() {console.log(document.scrollingElement)let result isScrollable(document.scrollingElement);console.log(frame是否可滑动, result)setTimeout(() {// 两端通用// document.scrollingElement.scrollTop 100// 适用PC端// frameWidow.document.documentElement.scrollTop 200// 适用移动端// frameWidow.document.body.scrollTop 300// scrollTo()方法// frameWidow.scrollTo(0, 400)})};/script/html5.2 document本身不可滑动
demo.html 不作修改frame.html 修改如下
!DOCTYPE html
htmlheadmeta charsetutf-8 /titleiframe或document监听滚动事件/titlestylehtml,body {padding: 0;margin: 0;}/style/headbodydiv stylewidth: 100%;height: 100vh;overflow: auto;h1这是1号标题/h1p这是一个段落。/pp这是一个段落。/pp这是一个段落。/ph2这是2号标题/h2p这是一个段落。/pp这是一个段落。/pp这是一个段落。/ph3这是3号标题/h3p这是一个段落。/pp这是一个段落。/pp这是一个段落。/ph4这是4号标题/h4p这是一个段落。/pp这是一个段落。/pp这是一个段落。/ph5这是5号标题/h5p这是一个段落。/pp这是一个段落。/pp这是一个段落。/ph6这是6号标题/h6p这是一个段落。/pp这是一个段落。/pp这是一个段落。/p/div/bodyscript// 判断是否可滑动function isScrollable(ele) {const hasScrollableContent ele.scrollHeight ele.clientHeight;const overflowYStyle window.getComputedStyle(ele).overflowY;const isOverflowHidden overflowYStyle.indexOf(hidden) ! -1;return hasScrollableContent !isOverflowHidden;}window.onload function() {console.log(document.scrollingElement)let result isScrollable(document.scrollingElement);console.log(frame是否可滑动, result)setTimeout(() {// 两端通用// document.scrollingElement.scrollTop 100// 适用PC端// frameWidow.document.documentElement.scrollTop 200// 适用移动端// frameWidow.document.body.scrollTop 300// scrollTo()方法// frameWidow.scrollTo(0, 400)})};/script/html
