php如何监听页面滚动,html5中在元素滚动条在滚动时触发的事件onscroll
實(shí)例
元素滾動(dòng)時(shí)執(zhí)行 JavaScript定義和用法
onscroll 事件在元素滾動(dòng)條在滾動(dòng)時(shí)觸發(fā)。
提示: 使用 CSS overflow 樣式屬性來創(chuàng)建元素的滾動(dòng)條。
瀏覽器支持
語法
HTML 中:
JavaScript 中:object.οnscrοll=function(){myScript};
JavaScript 中, 使用 addEventListener() 方法:object.addEventListener("scroll", myScript);
注意: Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。
Technical Details
技術(shù)細(xì)節(jié)是否支持冒泡:Yes
是否可以取消:NO
事件類型:Event
支持的 HTML 標(biāo)簽:
, , , , , , , , , ,-
, ,
,- ,
,
, , , , , ,onscroll事件失效
我是移動(dòng)塊html,
body {
width: 100%;
height: 100%;
/*overflow-x:hidden;*/
/*overflow: scroll;*/
}
.father {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.son {
height: 3000px;
background-color: yellow;
width: 100%;
font-size: 80px;
display: flex;
justify-content: center;
align-items: center;
}
function checkscroll() {
console.info(window.scrollY)
}
大家可以將這段代碼copy親自測(cè)試一下,在有和沒有overflow屬性之間切換,就明白了。
因?yàn)楹芏嗤瑢W(xué)在開發(fā)項(xiàng)目時(shí),會(huì)有腳手架之類的文件進(jìn)行快速開發(fā),但是有的腳手架會(huì)在入口的html文件,設(shè)置overflow: scroll/auto。
這個(gè)屬性在入口級(jí)別的文件中最好不要隨意使用,造成的scroll滑動(dòng)監(jiān)聽整體失效,你無論如何也不會(huì)想到是這個(gè)原因。
打個(gè)比方:
APP.vue
這是用vue.js寫的頁面,我在其中用了vux(一個(gè)基于vuejs的移動(dòng)組件庫)的一個(gè)組件view-box,當(dāng)時(shí)我找遍了所有的文件,并沒有那里
有over-flow 樣式;但是scroll事件失效,window.scrollY一直為0, 最后我發(fā)現(xiàn)所有頁面都是如此,于是我就定位在入口的幾個(gè)文件,將
相關(guān)的引入組件也進(jìn)行排查,終于在view-box,這個(gè)組建里找到了over-flow:auto;樣式。注釋掉后,就正常了
所以說:over-flow:auto;如果放在入口文件并且放在包裹的父元素上,一定要慎重!
總結(jié)
以上是生活随笔為你收集整理的php如何监听页面滚动,html5中在元素滚动条在滚动时触发的事件onscroll的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: win8计算机丢失xinput1+3.d
- 下一篇: 可观测性PHP秩判据,线性系统的可控性与