Cara menggunakan scroll css

2. Sebagai contoh disini, pada langkah 1 tersebut kita sedang membuat 2 halaman aja. Lalu lanjutkan dengan script kode CSSnya pada tag <head></head>.

Table of Contents Show

Ingin ada tombol yang ketika diklik langsung menggulir ke bagian tertentu yang masih di halaman web tersebut? Coba tutorial ini, yuk!
Menyiapkan File HTML
Membuat Fungsi Javascript
Solusi Lintas Browser

<style>
    html, body, section
    {
        height: 100%;
    }

    html
    {
        scroll-behavior: smooth;
    }

    body
    {
        font-family: Arial, Helvetica, sans-serif;
    }

    section
    {
        display: block;
        padding: 25px;
    }

    a
    {
        color: white;
    }

    #halaman1
    {
        background-color: chocolate;
        color: white;
    }

    #halaman2
    {
        background-color: black;
        color: white;
    }
</style>

3. Berikut ini adalah script secara keseluruhan.

<!DOCTYPE html>
<html>
<head>
    <title>Smooth Scrolling</title>
    <style>
        html, body, section 
        {
            height: 100%;
        }

        html 
        {
            scroll-behavior: smooth;
        }

        body 
        {
            font-family: Arial, Helvetica, sans-serif;
        }

        section 
        {
            display: block;
            padding: 25px;
        }

        a 
        {
            color: white;
        }

        #halaman1 
        {
            background-color: chocolate;
            color: white;
        }

        #halaman2 
        {
            background-color: black;
            color: white;
        }
    </style>
</head>

<body>

    <section id="halaman1">
        <h2>Halaman 1</h2>
        <a href="#halaman2">Klik Disini untuk ke Halaman 2</a>
    </section>

    <section id="halaman2">
        <h2>Halaman 2</h2>
        <a href="#halaman1">Klik Disini untuk ke Halaman 1</a>
    </section>

</body>

</html>

4. Kira-kira, seperti inilah hasilnya. Lalu coba klik link yang mengarah ke halaman selanjutnya yang ada pada halaman ini.

5. Maka akan tampil halaman berikutnya seperti di bawah ini. Sama seperti langkah 4, klik link yang mengarah ke halaman sebelumnya yang ada pada halaman ini

Ingin ada tombol yang ketika diklik langsung menggulir ke bagian tertentu yang masih di halaman web tersebut? Coba tutorial ini, yuk!

Solusi Lintas Browser

Untuk browser yang tidak mendukung properti scroll-behavior, kita bisa menggunakan JavaScript atau pustaka JavaScript, seperti jQuery, untuk membuat solusi yang akan berfungsi untuk semua browser:

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 11 : Cara Menggunakan Properti Outlines di CSS. Selanjutnya, kita akan mempelajari cara menggunakan properti overflow di CSS.

Mungkin ada beberapa kendala ketika konten elemen mungkin lebih besar dari jumlah ruang yang dialokasikan untuk konten tersebut.

Misalnya, nilai properti width dan height yang diberikan tidak cukup ruang untuk menampung konten sebuah elemen.

CSS menyediakan properti yang disebut overflow yang memberi tahu browser apa yang harus dilakukan jika konten lebih besar dari kotak konten itu sendiri.

Properti ini dapat diisi dengan nilai berikut :

NoNilai & Deskripsi1visible
Memungkinkan konten keluar dari batas elemen yang memuatnya.2hidden
Isi dari elemen bersarang hanya dipotong di perbatasan elemen yang dimuat dan tidak ada bilah gulir yang terlihat.3scroll
Ukuran elemen penampung tidak berubah, tetapi scrollbar ditambahkan untuk memungkinkan pengguna menggulir untuk melihat konten.4auto
Tujuannya sama dengan scroll, tetapi scrollbar hanya akan ditampilkan jika konten memiliki jumlah yang banyak.

Berikut ini contohnya :

<html>
   <head>
      <style type = "text/css">
         .scroll {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
   </head>

   <body>
      <p>Contoh nilai scroll:</p>
      <div class = "scroll">
         Saya akan menuliskan banyak konten di sini untuk menunjukkan kepada Anda 
         Scrollbar akan bekerja jika konten melebihi batas kotak elemen. 
         Ini akan menyediakan horizontal dan vertical scrollbar.
      </div>
      <br />
      
      <p>Contoh nilai auto:</p>
      
      <div class = "auto">
         Saya akan menuliskan banyak konten di sini untuk menunjukkan kepada Anda 
         Scrollbar akan bekerja jika konten melebihi batas kotak elemen. 
         Ini akan menyediakan vertical scrollbar.
      </div>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

CodePen Embed FallbackCodePen Embed Fallback

Semoga tutorial ini bisa membantu Anda mempelajari cara menggunakan properti overflow di CSS untuk membuat dokuemn HTML lebih bagus.