Thuộc tính sự kiện trên HTML được kích hoạt khi một phần tử HTML được cuộn bằng cách sử dụng thanh cuộn của nó trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
<tagname onscroll=”script”></tagname>
Hãy để chúng tôi xem một ví dụ về Thuộc tính sự kiện trên HTML -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
padding: 20px;
}
.box-para {
border: 2px solid #fff;
padding: 10px;
width: 200px;
height: 200px;
overflow: scroll;
margin: 1rem auto;
}
</style>
</head>
<body>
<h1>HTML onscroll Event Attribute Demo</h1>
<p onscroll="scrollFn()" class="box-para">
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text.
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text.
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text.
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text.
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text.
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text.
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text.
This is a paragraph element with some dummy text.</p>
<p>Scroll above paragraph text to increase its font size</p>
<script>
function scrollFn() {
document.querySelector(".box-para").style.fontSize = "1.5rem";
}
</script>
</body>
</html> Đầu ra
Cuộn qua nội dung đoạn văn để quan sát cách thuộc tính sự kiện trên cuộn hoạt động -
