Solusi Overflow Hidden Pada Body Tidak Berfungsi Pada Mobile

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

Biasanya sebagai pola scroll pada halaman dihilangkan dikala memakai element dengan position: fixed; menyerupai sajian fixed, widget fixed, atau lainnya. Sehingga dikala 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 aku 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 sanggup memakai fungsi javascript untuk toggle menawarkan class pada body menyerupai 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 supaya bermanfaat.


Sumber https://www.kompiajaib.com/

Share this post