Thuộc tính sự kiện onwheel trong HTML

Thuộc tính sự kiện onwheel trong HTML được kích hoạt khi người dùng di chuyển cuộn chuột (mouse wheel) trên một phần tử HTML trong tài liệu HTML.

Cú pháp

Cú pháp như sau:

<tagname onwheel="script">Nội dung</tagname>

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính sự kiện onwheel 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;
    }
    .wheel {
      border: 2px solid #fff;
      padding: 10px;
    }
  </style>
</head>
<body>
<h1>Demo thuộc tính sự kiện onwheel trong HTML</h1>
<p onwheel='wheelFn()' class='wheel'>Đây là một đoạn văn với một số nội dung giả. Đây là một đoạn văn với một số nội dung giả. Đây là một đoạn văn với một số nội dung giả. Đây là một đoạn văn với một số nội dung giả. Đây là một đoạn văn với một số nội dung giả. Đây là một đoạn văn với một số nội dung giả. Đây là một đoạn văn với một số nội dung giả. Đây là một đoạn văn với một số nội dung giả.</p>
<p>Di chuyển cuộn chuột lên hoặc xuống trên đoạn văn ở trên</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>

Kết quả

Bây giờ hãy di chuyển cuộn chuột lên hoặc xuống trên phần tử đoạn văn để quan sát cách thuộc tính sự kiện onwheel hoạt động.