Skip to main content

Solusi Overflow Hidden Pada Body Tidak Berfungsi Pada Mobile

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.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB