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.