DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

Mengatur Nilai Gulir Vertikal HTML Menggunakan scrollTop DOM

Properti scrollTop DOM pada HTML digunakan untuk mengembalikan atau mengatur angka dalam ukuran pixel pada nilai elemen scroll vertikal. Jika konten elemen tidak generate nilai scroll, maka nilai properti scrollTop adalah 0.

2 Contoh Penggunaan Properti scrollTop DOM pada HTML
Ilustrasi scrollTop DOM HTML

Sintak:
  • 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.

Baca Juga:

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: " 

+

+ "px";

}

</script>

 

</body>

 

</html>

Output:

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>

Output:

Blog Elfan

Properti scrollTop DOM



Blog Elfan

Merupakan portal ilmu komputer.


Komentar

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan method scrollTop DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan scrollTop DOM pada HTML:
      1. Apple Safari
      2. Google Chrome
      3. Firefox
      4. Opera
      5. Internet Explorer

      Hapus
  2. Apa yang dimaksud dengan properti scrollTop DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti scrollTop DOM pada HTML berfungsi untuk mengatur atau mengembalikan nilai jumlah pixel konten pada suatu elemen yang digulir atau di scroll secara vertikal.

      Tips: gunakan pula properti scrollLeft untuk mengatur atau mengembalikan nilai jumlah pixel konten pada suatu elemen yang di scroll secara horizontal.

      Hapus
    2. 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

Posting Komentar

Hubungi admin melalui Wa : +62-896-2514-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

~ Ikatlah Ilmu dengan Memostingkannya ~

Postingan populer dari blog ini (30 Hari)

Specifier %d dan %i Bahasa C dan Fungsinya

Enkapsulasi Java dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas