19/09/2018, 14:51
Sự kiện onscroll
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 < ! DOCTYPE html > < html > < head > <style> #myDIV { border : ...
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <style> #myDIV { border: 1px solid black; awidth: 200px; height: 100px; overflow: scroll; } </style> </head> <body> <p>Sử dụng thanh cuốn ở phía dưới.</p> <div id="myDIV" onscroll="myFunction()">Hạt gạo làng ta<br /> Có vị phù sa<br /> Của sông Kinh Thầy<br /> Có hương sen thơm<br /> Trong hồ nước đầy<br /> Có lời mẹ hát<br /> Ngọt bùi đắng cay...</div> <script> function myFunction() { document.getElementById("myDIV").style.color = "red"; } </script> <p>Hàm sẽ được kích hoạt để chuyển chữ sang màu đỏ khi bạn sử dụng thanh cuốn trong thẻ div.</p> </body> </html> |
Demo
Định nghĩa và cách sử dụng
Thuộc tính onscroll được kích hoạt khi thanh cuộn của một thẻ được sử dụng.
Mẹo: Sử dụng thuộc tính overflow trong CSS để tạo ra thanh cuộn cho thẻ.
Trình duyệt hỗ trợ
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| onscroll | Có | Có | Có | Có | Có |
Khác biệt giữa HTML 4.01 và HTML5
onscroll là một thuộc tính mới trong HTML5.
Cú pháp
|
1 |
<element onscroll="script"> |
Giá trị thuộc tính
| Giá trị | Miêu tả |
|---|---|
| script | Chạy script khi thuộc tính được kích hoạt |
Chi tiết
Thuộc tính được sử dụng trong thẻ : <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> và <ul>.
