Lompat ke konten Lompat ke sidebar Lompat ke footer

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

Sebelum memahami lebih dalam materi tentang Mengatur Nilai Gulir Vertikal HTML Menggunakan scrollTop DOM, terlebih dahulu pelajari materi tentang: Mengatur Nilai Gulir Horizontal HTML Menggunakan scrollLeft DOM [klik], Mengembalikan Nilai Tinggi Gulir HTML Menggunakan scrollHeight DOM [klik], dan Mengganti Node Child HTML Menggunakan replaceChild DOM [klik].

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.


Artikel ini didedikasikan kepada: Muhamad Bayu Irawan, Muhammad Farhanudin, Muhammad Minaur Rohman, Muhammad Rifqi Dzulfiqar, dan Muhammad Wimas Bahrurrizqi.

5 komentar untuk "Mengatur Nilai Gulir Vertikal HTML Menggunakan scrollTop DOM"

  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

Hubungi admin melalui Wa : +62-896-2414-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 -
- Big things start from small things -