溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“html5中如何使用onscroll”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“html5中如何使用onscroll”這篇文章吧。
實例
<div> 元素滾動時執行 JavaScript
<div onscroll="myFunction()">
定義和用法
onscroll 事件在元素滾動條在滾動時觸發。
提示： 使用 CSS overflow 樣式屬性來創建元素的滾動條。
瀏覽器支持
語法
HTML 中:
<element onscroll="myScript">
JavaScript 中:
object.onscroll=function(){myScript};JavaScript 中, 使用 addEventListener() 方法:
object.addEventListener("scroll", myScript);注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。
Technical Details
技術細節
| 是否支持冒泡: | Yes |
| 是否可以取消: | NO |
| 事件類型: | Event |
| 支持的 HTML 標簽: | <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h2> - <h7>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul> |
onscroll事件失效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body onscroll="checkscroll()">
<div class="father" >
<div class="son">我是移動塊</div>
</div>
</body>
</html>
<style type="text/css">
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;
}
</style>
<script type="text/javascript">
function checkscroll() {
console.info(window.scrollY)
}
</script>大家可以將這段代碼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；如果放在入口文件并且放在包裹的父元素上，一定要慎重！
以上是“html5中如何使用onscroll”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
