Thuộc tính sự kiện onscroll trong HTML được kích hoạt khi một phần tử HTML được cuộn (scrolled) bằng cách sử dụng thanh cuộn (scrollbar) của nó trong tài liệu HTML.
Cú pháp
Cú pháp như sau:
<tagname onscroll="script"></tagname>
Ví dụ
Dưới đây là ví dụ minh họa thuộc tính sự kiện onscroll trong HTML:
<!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>Demo thuộc tính sự kiện onscroll trong HTML</h1>
<p onscroll="scrollFn()" class="box-para"> Đây là một phần tử đoạn văn với một số văn bản giả. Đây là một phần tử đoạn văn với một số văn bản giả. Đây là một phần tử đoạn văn với một số văn bản giả. Đây là một phần tử đoạn văn với một số văn bản giả. Đây là một phần tử đoạn văn với một số văn bản giả. Đây là một phần tử đoạn văn với một số văn bản giả. Đây là một phần tử đoạn văn với một số văn bản giả. Đây là một phần tử đoạn văn với một số văn bản giả. Đây là một phần tử đoạn văn với một số văn bản giả. Đây là một phần tử đoạn văn với một số văn bản giả. Đây là một phần tử đoạn văn với một số văn bản giả. Đây là một phần tử đoạn văn với một số văn bản giả. Đây là một phần tử đoạn văn với một số văn bản giả. Đây là một phần tử đoạn văn với một số văn bản giả. Đây là một phần tử đoạn văn với một số văn bản giả.</p>
<p>Cuộn nội dung đoạn văn trên để tăng kích thước font chữ</p>
<script>
function scrollFn() {
document.querySelector(".box-para").style.fontSize = "1.5rem";
}
</script>
</body>
</html>
Kết quả
Cuộn qua nội dung đoạn văn để quan sát cách thuộc tính sự kiện onscroll hoạt động:
