Tips agar gulir pada web atau blog menjadi lembut

Zulmy Eve       February 08, 2016       Add Comment       Javascript       Tips

smooth scroll

Cara agar gulir pada web atau blog menjadi lembut - Bisa di bilang smooth scroll, namun banyak orang yang salah mengartikan smooth scroll terutama mengartikannya untuk back to top, mengapa begitu? fakta, ketika gw search di google dengan kata kunci 'cara agar blog menjadi smooth ketika di scroll' yang muncul semua membahas cara membuat smooth scroll to top atau back to top menggunakan jQurey dsb.

Sampai akhirnya gw menemukan blog bule apalah blog nya lupa, mereka berbagi tips apa yang gw cari, dan ternyata sangat mudah dengan menyisipkan script tertentu bisa membuat blog atau web terlihat lebih lembut saat di gulirkan ke atas maupun kebawah menggunakan tombol navigasi yang ada di keyboard. Lalu bagaimana agar gulirnya menjadi lembut ketika di scroll ke samping kiri atau kanan? Bisa saja, asal tampilan blog mu melebihi resolusi layar PC aliasnya jumbo kan bisa tuh di scroll ke samping LOL.

Ok, kembali lagi pada script tertentu yang di sisipkan sebelum kode </head> kira kira wujudnya seperti ini

<script src='https://googledrive.com/host/0B6aow0kbFP-bZWg3VVByamg3Zkk' type='text/javascript'></script>

Namun script tersebut tidak valid html5, akhirnya gw sedikit ngoprek agar menjadi valid. anggap aja ceritanya gw jago vro. Dan sukses valid html5 seperti ini

<script src='https://googledrive.com/host/0B6aow0kbFP-bZWg3VVByamg3Zkk' type='text/javascript'/>

Sampai disini masih ada janggal, yakni terkena bloking perenderan pada pagespeed insights dan membebankan load saat halaman di muat.

Agar tidak terkena perenderan dan tidak membebankan load, manfaatkan javascript async, seperti berikut ini

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://googledrive.com/host/0B6aow0kbFP-bZWg3VVByamg3Zkk';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Namun jangan senang dulu, script tersebut tidak valid html5, agar valid html5 ganti symbol kutip tunggal dengan &#39; disemua isi javascriptnya.
Ok, agar tidak bingung silahkan langsung salin javascript berikut deh

<script type='text/javascript'>
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://googledrive.com/host/0B6aow0kbFP-bZWg3VVByamg3Zkk&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Tempel sebelum kode </head>.

Akan terlihat biasa saja jika menggulirkan menggunakan handle scroll yang ada di samping kanan. Jadi, gunakanlah navigasi atas atau bawah yang ada pada keyboard saat menggulirkan dan akan berjalan lancar menggunakan peramban chrome, selamat mencoba.

Baca juga:

Zulmy Eve

Empat tahun menggeluti dunia pemerograman membuat saya ingin mencoba untuk berbagi.