Mengatur Nilai Gulir Vertikal HTML Menggunakan scrollTop DOM
 |
| Ilustrasi scrollTop DOM HTML |
- Mengembalikan nilai properti scrollTop: element.scrollTop
- Mengatur nilai properti scrollTop: element.scrollTop = value
Catatan: nilai angka spesifik dari konten elemen pixel adalah scroll vertikal, dengan nilai yang dikembalikan adalah tidak bisa negatif. Jika nilai yang ditentukan adalah lebih besar dari nilai maksimum scroll, maka nilai yang dikembalikan akan diatur ke nilai maksimumnya.
Contoh:
<html>
<head>
<title>
Properti scrollTop DOM HTML
</title>
<style>
#div
{
height: 100px;
width: 250px;
overflow: auto;
margin: auto;}
#ele
{
height: 300px;
background-color: green;
color: white;}
</style>
</head>
<body style="text-align: center;">
<h1
style="color:green;">
Blog Elfan
</h1>
<h2>
Properti scrollTop DOM
</h2>
<div
id="div"
onscroll="Bnns()">
<div id="ele">
<p>
Blog Elfan
</p>
<p>
Merupakan portal ilmu
komputer.
</p>
<p>
Mengajarkan berbagai
pengetahuan tentang
pemrograman.
</p>
</div>
</div>
<p id="p"></p>
<script>
function Bnns()
{
var doc = document.getElementById("div");
var x = doc.scrollTop;
document.getElementById("p").innerHTML =
"Vertical scroll: "
+ x
+ "px";
}
</script>
</body>
</html>
Blog Elfan
Properti scrollTop DOM
Blog Elfan
Merupakan portal ilmu komputer.
Mengajarkan berbagai pengetahuan tentang pemrograman.
Contoh:
<html>
<head>
<title>
Properti scrollTop DOM HTML
</title>
<style>
#div
{
height: 100px;
width: 250px;
overflow: auto;
margin: auto;}
#ele
{
height: 300px;
background-color: green;
color: white;}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">
Blog Elfan
</h1>
<h2>
Properti scrollTop DOM
</h2>
<button
onclick="bnns()">
Scroll Div
</button>
<br>
<br>
<div
id="div"
onscroll="bnns()">
<div id="ele">
<p>
Blog Elfan
</p>
<p>
Merupakan portal ilmu
komputer.
</p>
</div>
</div>
<script>
function bnns()
{
var elmnt = document.getElementById("div");
elmnt.scrollTop = 50;
}
</script>
</body>
</html>
Blog Elfan
Properti scrollTop DOM
Blog Elfan
Merupakan portal ilmu komputer.
- 7 Nilai dari Properti Koordinat Geolokasi DOM pada HTML [klik]
- 2 Nilai Return Properti Geolokasi Posisi DOM pada HTML [klik]
- Cara Penggunaan Method History.back() DOM pada HTML [klik]
- Cara Penggunaan Method History.forward() DOM pada HTML [klik]
- 2 Contoh Penggunaan Method History.go() DOM pada HTML [klik]
- Cara Penggunaan Properti History.length() DOM pada HTML [klik]
- 2 Contoh Penggunaan Method item() DOM pada HTMLCollection [klik]
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan method scrollTop DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan scrollTop DOM pada HTML:
Hapus1. Apple Safari
2. Google Chrome
3. Firefox
4. Opera
5. Internet Explorer
Apa yang dimaksud dengan properti scrollTop DOM pada HTML?
BalasHapusProperti scrollTop DOM pada HTML berfungsi untuk mengatur atau mengembalikan nilai jumlah pixel konten pada suatu elemen yang digulir atau di scroll secara vertikal.
HapusTips: gunakan pula properti scrollLeft untuk mengatur atau mengembalikan nilai jumlah pixel konten pada suatu elemen yang di scroll secara horizontal.
Properti scrollTop berfungsi untuk mendapatkan atau menetapkan nilai jumlah dalam satuan pixel pada konten elemen yang digulir secara vertikal, dimana nilai scrollTop elemen adalah nilai pengukuran jarak dari elemen teratas ke konten palig atas yang terlihat. Ketika konten elemen tidak menghasilkan nilai scrollbar vertikal, maka nilai scrollTop adalah 0.
Hapus