March 2, 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.
3 comments :
  1. Thx Gan sangat membantu nih..
    Agan bsa javascript ga?
    Thx Gan..

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

      Delete

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

Best Regard


Decky canser