Efek Melakukan Scroll Mouse HTML Menggunakan Atribut OnScroll
Atribut scroll merupakan atribut html yang bekerja ketika elemen scroll digerakkan menggunakan mouse. Untuk menciptakan elemen scroll, maka dapat pula dilakukan dengan menggunakan properti overflow CSS.
Tag Pendukung: atribut ini didukung penggunaannya oleh segala jenis elemen pada html.
Sintak:
<element onscroll = "script">
 |
| Ilustrasi Atribut OnScroll HTML |
Sebelum memahami lebih dalam materi tentang Efek Melakukan Scroll Mouse HTML Menggunakan Atribut OnScroll, terlebih dahulu pelajari materi tentang: Atribut Event OnDrop HTML dan Fungsinya [klik], Atribut OnDragStart HTML dan Fungsinya [klik], dan Efek Menyeret Keluar Area HTML Menggunakan Atribut OnDragLeave [klik].
Baca Juga:
<element onscroll = "script">
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
atribut onscroll
</title>
<style>
#mkn
{
border: 1px solid black;
width: 400px;
height: 100px;
overflow: scroll;
text-align: justify;}
h1
{
color: green;}
</style>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h2>
atribut onscroll
</h2>
<div
id="mkn"
onscroll="Makan()">
<b>MakanforMakan:</b> merupakan
portal ilmu komputer
yang dibuat sebagai media
pembelajaran tik dan berbagai
informasi menarik lainnya
seputar dunia pendidikan.
</div>
<script>
function Makan()
{
document.getElementById("mkn").style.color = "green";
}
</script>
</body>
</html>
Output:
Blog Elfan
atribut onscroll
MakanforMakan: merupakan portal ilmu komputer yang dibuat sebagai media pembelajaran tik dan berbagai informasi menarik lainnya seputar dunia pendidikan.
Referensi Tambahan:
- Cara Menggunakan Method DOM getNamedItem() pada HTML [klik]
- Cara Mudah Menggunakan Properti isID DOM pada HTML [klik]
- Cara Penggunaan Method item() DOM pada HTML [klik]
- Penggunaan Properti Length DOM pada HTML [klik]
- Penggunaan Method removeNamedItem() DOM pada HTML [klik]
- Cara Penggunaan Method setNamedItem() DOM pada HTML [klik]
- Cara Mudah Menggunakan Properti Spesifik DOM pada HTML [klik]
Artikel ini didedikasikan kepada: Shinta Aprilita Kusumawardani, Shobirotul Labibah, Sulthan Afkar Aisy, Vivi Lestiyani, dan Ahmad Syahrul Setiawan.
Kenapa atribut scrollnya tidak bisa fungsi gan?
BalasHapusBisa, coba kalimat pada artikelnya diperbanyak, supaya fungsi dari atribut scrollnya bisa terlihat dengan jelas.
HapusApa saja jenis browser yang dapat digunakan untuk mengaktifkan atribut onscroll pada elemen html?
BalasHapusBerikut adalah beberap jenis browser populer yang dapat digunakan untuk mengaktifkan atribut onscroll pada elemen html:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Safari
Apa yang dimaksud dengan atribut onscroll pada elemen html?
BalasHapusEvent onscroll dapat diaktifkan ketika tampilan dokumen atau elemen telah di scroll, baik oleh user, API Web, atau user agent.
HapusApa perbedaan atribut onscrol dan onwheel pada elemen html?
BalasHapusjangan bingung antara onscroll dengan onswheel! onwheel menangani rotasi roda secara umum, sedangkan onscroll menangani pengguliran konten objek.
Hapus