Skip to main content
KOMPI AJAIB

follow us

Berbuat khilaf adalah sifat. Meminta maaf adalah kewajiban. Dan kembalinya Fitrah adalah tujuan. Saya, Adhy Suryadi admin blog Kompi Ajaib MEMOHON MAAF LAHIR DAN BATHIN. Minal Aidin Wal Faidzin Taqabalallahu minnaa wa minkum. Selamat hari raya Idul Fitri, 1 Syawal 1439 H.

×

Solusi Overflow Hidden Pada Body Tidak Berfungsi Pada Mobile

Baca juga:

Apakah Anda pernah mencoba memberikan style overflow: hidden; pada body untuk menghilangkan scroll halaman? Dan apakah fungsi menyembunyikan scroll pada body tersebut berfungsi ketika dicoba dengan perangkat mobile?

Biasanya sebagai contoh scroll pada halaman dihilangkan ketika menggunakan element dengan position: fixed; seperti menu fixed, widget fixed, atau lainnya. Sehingga ketika element fixed diaktifkan maka scroll halaman menghilang sehingga fokus perhatian pada element fixed tersebut.

Jika Anda mendapati overflow: hidden; atau menghilangkan scroll pada body tidak berfungsi pada perangkat mobile, silahkan coba trik ini dengan menambahkan juga position: relative; pada body. Trik ini sudah saya coba dan berfungsi pada perangkat mobile, atau silahkan coba buka halaman ini dengan mobile dan coba hilangkan scroll pada iframe jsfiddle di bawah ini.


Kita bisa menggunakan fungsi javascript untuk toggle memberikan class pada body seperti di bawah ini dan juga dengan style CSS.


function toggleClassbody() {
  var body = document.body;
  "flow" !== body.className ? body.className = "flow" : body.className = "";
};

Kemudian tambahkan CSS berikut:


.flow {
    overflow: hidden;
    position: relative;
}

Dengan HTML berikut:


<button onclick="toggleClassbody()">Hidden scroll</button>

Selamat mencoba dan semoga bermanfaat.

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar