2 Maret 2014

Menghilangkan scroll pada responsive design

Ketika mengubah template standar menjadi responsive ada banyak masalah yang saya temui, salah-satunya scroll dibagian bawah yang masih terlihat. Padahal setelah scroll digeser kekanan tidak ada lagi halaman yang harus ditampilkan, hanya terlihat bagian halaman kosong berwarna putih dan tentunya hal ini terlihat kurang menarik. Setelah cari-cari tutoral di internet akhirnya saya temui solusinya, ternyata kita cukup menambahkan kode html{overflow-x: hidden;} untuk menyembunyikan halaman yang melebihi batas pada code responsive seperti dibawah.

@media screen and (max-width:320px){ 
html{ overflow-x: hidden; }
}

contoh diatas akan menghilangkan scroll dibagian bawah browser pada resolusi 320px kebawah, untuk menghilangkan scroll dibagian samping ubah overflow-x menjadi overflow-y. Semoga bermanfaat.
5 komentar :
  1. Thx Gan sangat membantu nih..
    Agan bsa javascript ga?
    Thx Gan..

    BalasHapus
    Balasan
    1. Sama-sama mas. kalo javascript tidak bisa, html dan css aja baru kenal pas ngeblog. heheh

      Hapus
  2. Terimakasih, begitu membantu.

    BalasHapus
  3. mantap banget tutorialnya gan, saya sangat berterima kasih, karena saya sudah lama cari tutorial selalu gagal, baru kali ini berhasil, jadi saya bisa hilangkan scroll di bawah html template saya. Terima kasih

    BalasHapus
  4. makasih banyak bos. saya muter" ngatur di css ga ngaruh walau dikurangin ternyata ini toh ramuannya wkwk. joss

    BalasHapus

Jika ada artikel yang tidak Anda mengerti, maka gunakan fasilitas kotak komentar ini atau pada halaman kontak untuk menanyakannya.

Best Regard


Decky canser