實例

元素滾動時執行 JavaScript

定義和用法

onscroll 事件在元素滾動條在滾動時觸發。

提示： 使用 CSS overflow 樣式屬性來創建元素的滾動條。

瀏覽器支持

語法

HTML 中:

JavaScript 中:object.οnscrοll=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:object.addEventListener("scroll", myScript);

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

Technical Details

技術細節是否支持冒泡:Yes

是否可以取消:NO

事件類型:Event

支持的 HTML 標簽:

, , , , , , , , , ,

-

, ,

,

• ,

,

, , , , , ,

onscroll事件失效

我是移動塊

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親自測試一下，在有和沒有overflow屬性之間切換，就明白了。

因為很多同學在開發項目時，會有腳手架之類的文件進行快速開發，但是有的腳手架會在入口的html文件，設置overflow: scroll／auto。

這個屬性在入口級別的文件中最好不要隨意使用，造成的scroll滑動監聽整體失效，你無論如何也不會想到是這個原因。

打個比方：

APP.vue

這是用vue.js寫的頁面，我在其中用了vux(一個基于vuejs的移動組件庫)的一個組件view-box,當時我找遍了所有的文件，并沒有那里

有over-flow 樣式；但是scroll事件失效，window.scrollY一直為0， 最后我發現所有頁面都是如此，于是我就定位在入口的幾個文件，將

相關的引入組件也進行排查，終于在view-box,這個組建里找到了over-flow：auto；樣式。注釋掉后，就正常了

所以說：over-flow：auto；如果放在入口文件并且放在包裹的父元素上，一定要慎重！

總結

以上是生活随笔為你收集整理的php如何监听页面滚动,html5中在元素滚动条在滚动时触发的事件onscroll的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。