Thuộc tính sự kiện onwheel HTML được kích hoạt khi người dùng di chuyển con lăn của chuột trên phần tử HTML trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
<tagname onwheel=”script”>Content</tagname>
Hãy để chúng tôi xem một ví dụ về Thuộc tính sự kiện onwheel 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;
}
.wheel {
border: 2px solid #fff;
padding: 10px;
}
</style>
</head>
<body>
<h1>HTML onwheel Event Attribute Demo</h1>
<p onwheel='wheelFn()' class='wheel'>This is a paragraph with some dummy content.
This is a paragraph with some dummy content. This is a paragraph with some dummy content.
This is a paragraph with some dummy content. This is a paragraph with some dummy content.
This is a paragraph with some dummy content. This is a paragraph with some dummy content.
This is a paragraph with some dummy content.</p>
<p>Move the wheel of the mouse up or down on above paragraph</p>
<script>
function wheelFn() {
document.body.style.background = "linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%) no-repeat";
document.body.style.color = "#fff";
}
</script>
</body>
</html> Đầu ra
Bây giờ, hãy di chuyển con lăn chuột lên hoặc xuống trên phần tử đoạn để quan sát cách hoạt động của thuộc tính sự kiện onwheel.
