2 Contoh Penggunaan Properti scrollTop DOM pada HTML

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.

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.

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

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

*Jika terdapat typo, link bermasalah, dan lain sebagainya, pengunjung dapat melaporkan permasalahan tersebut melalui WA: +62-896-2514-6106




~ Ikatlah Ilmu dengan Memostingkannya ~

Referensi Tambahan:

Enkapsulasi pada Java

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya

6 Contoh Program Method Overloading pada Java

3 Jenis Utama Looping pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C