html5中如何使用onscroll

發(fā)布時(shí)間：2021-09-13 16:16:47 來源：億速云閱讀：394 作者：小新欄目：web開發(fā)

這篇文章主要為大家展示了“html5中如何使用onscroll”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“html5中如何使用onscroll”這篇文章吧。

實(shí)例

<div> 元素滾動(dòng)時(shí)執(zhí)行 JavaScript

<div onscroll="myFunction()">

定義和用法

onscroll 事件在元素滾動(dòng)條在滾動(dòng)時(shí)觸發(fā)。

提示：使用 CSS overflow 樣式屬性來創(chuàng)建元素的滾動(dòng)條。

瀏覽器支持

html5中如何使用onscroll

語法

HTML 中:

<element onscroll="myScript">

JavaScript 中:

object.onscroll=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("scroll", myScript);

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

Technical Details

技術(shù)細(xì)節(jié)

是否支持冒泡:	Yes
是否可以取消:	NO
事件類型:	Event
支持的 HTML 標(biāo)簽:	<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">我是移動(dòng)塊</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屬性之間切換，就明白了。

因?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

html5中如何使用onscroll

這是用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；如果放在入口文件并且放在包裹的父元素上，一定要慎重！

以上是“html5中如何使用onscroll”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

html5中如何使用onscroll

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽