HTML事件属性onscroll

HTML事件属性onscroll


触发 onscroll 属性事件当元素的滚动条正在滚动时。

HTML5中的新功能

onscroll 属性是HTML5中的新特性。

句法 

<element onscroll="script or Javascript function name">

支持的标签 

<address>, 
<blockquote>, 
<body>, 
<caption>, 
<center>, 
<dd>, 
<dir>, 
<div>, 
<dl>, 
<dt>, 
<fieldset>, 
<form>, 
<h1> to <h6>, 
<html>, 
<li>, 
<menu>, 
<object>, 
<ol>, 
<p>, 
<pre>, 
<select>, 
<tbody>, 
<textarea>, 
<tfoot>, 
<thead>, 
<ul>


浏览器兼容性

onscroll Yes Yes Yes Yes Yes

例子

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
    border: 1px solid black;
    width: 200px;
    height: 100px;
    overflow: scroll;
}
</style>
</head>
<body>

<div id="myDIV" onscroll="myFunction()">
This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. 
</div>

<script>
function myFunction() {
    console.log("scrolled");
}
</script>

</body>
</html>

Click to view the demo



www.sxiaw.com