Solusi Overflow Hidden Pada Body Tidak Berfungsi Pada Mobile

Ditulis oleh: Adhy Suryadi

Ditulis pada: 5/26/2017

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.