實(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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。