Selamat Datang

Memasang Fitur Click & Drag Untuk Menggantikan Scrollbar Browser

Memasang fitur Click & Drag untuk menggantikan scrollbar browser sudah menjadi trend saat ini, apalagi dengan semakin maraknya penggunaan tablet PC, teknik ini semakin berkembang dan banyak di implementasikan diberbagai website.

Seminggu yang lalu, saya mendesain ulang tampilan situs pribadi saya menjadi lebih sederhana, serta menambahkan blog. Namun karena tampilannya sederhana, saya tidak ingin situs/blog saya terlihat “belum jadi”.

Karena itu saya menambahkan beberapa fitur. Salah satunya adalah fitur click and drag untuk menggantikan fungsi scrollbar browser. Fitur click and drag sistem kerjanya sama dengan fitur swipe di perangkat touchscreen.

Tertarik untuk memasangnya di situs/blog anda juga? Ikuti tutorial yang sangat mudah berikut.

Resource:

Kita akan membutuhkan beberapa resource berikut:

  1. jQuery. Unduh versi terbaru dari jQuery Download
  2. NiceScroll. Unduh dari GitHub
  3. File Cursor (kita akan hotlink dari Google)

Namun sebelum masuk tutorial, ada beberapa poin yang harus saya singgung, yaitu :

  1. Khusus untuk WordPress. NiceScroll semestinya bisa bekerja di jQuery v.1.5 sampai v.1.9. Namun pada prakteknya, NiceScroll tidak bisa bekerja di jQuery v.1.8.3 bawaan WordPress (v.3.5.1). Saya tidak menyarankan anda untuk mengganti jQuery WordPress dengan jQuery v.1.9, karena itu akan membuat banyak fungsi dan plugin WordPress tidak bisa bekerja. Namun kalau anda penasaran, silahkan anda coba utak-atik sendiri.
  2. Dengan fitur click and drag, maka seleksi teks (blok teks) menjadi tidak mungkin bisa dilakukan. Jadi kalau situs/blog anda membutuhkan seleksi teks, lewati parameter “touchbehavior:true” dalam tutorial ini. Konsekuensinya, anda tidak akan mendapatkan fitur click and drag, tapi scrolling halaman anda akan terlihat lebih halus dan menarik.
Touch Screen

Image by Ebayink

HTML

Pada dasarnya, ini bisa diterapkan di semua dokumen HTML. Bahkan yang anda miliki saat ini (bagi pemilik situs/blog). Hanya saja pastikan tidak ada jQuery lain untuk menghindari bentrok.

Sisipkan kode untuk memanggil jQuery ke dalam dokumen HTML, tepat di atas tag /body.

<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.nicescroll.min.js"></script>

Kemudian untuk parameter, gunakan kode berikut:

$(document).ready(
	function() {
        	$("html").niceScroll({touchbehavior:true});
        }
);

Parameter lengkapnya ada di situs pengembang atau bisa download file yang disediakan.

Cursor

Saat ini, halaman situs/blog anda sudah memiliki fitur click and drag. Namun, ada satu hal yang mengganggu saya, yaitu cursor tidak berubah menjadi “grab” ketika kita “drag” halaman. Untuk itu, mari kita tambahkan cursor grab dengan CSS dan javascript.

Pada file CSS anda, sisipkan stylesheet berikut:

.hand {
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
.grab {
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}

Lalu pada dokumen HTML, sisipkan javascript berikut ke dalam tag body :

onmouseup="this.className='hand'" onmousedown="this.className='grab'"

Dan selesai. Silahkan refresh dokumen anda, dan nikmati fitur baru dari situs/blog anda.

Hasil

Berikut adalah hasil dari tutorial di atas.

Demo | Download

Image by : ebayink





Penulis :

Seorang Astronot Web dan WordPress designer/front-end developer. Menyukai OSX, minimalism, dan grid. Terobsesi dengan branding, digital design, dan Search Engine Optimisation. View all posts by Leo Ari Wibowo

Comments

11 thoughts on “Memasang Fitur Click & Drag Untuk Menggantikan Scrollbar Browser

  1. ternyata pake itu toh, keren.. coba dulu :D

  2. BOY ROHMAN says:

    wahh bagus juga ni.. boleh di coba ni.. :)

  3. wah sip sip, pgen nyoba dulu aku
    makasih buat tutorialnya.

  4. gang says:

    wah.. sip2

  5. zul fikar says:

    kebetulan lgi butuh…ehh.. liat artikel nih ._.

    kira kira ada g javascript tombol up, down, left, right ?
    contohnya pass klik tombol down otomatis turun beberapa terajat…

    >> http://jsfiddle.net/EB4UC/2/
    saya sudah coba tidk tidak bisa
    #saya memakai blogger

    • Coba gabungkan dengan scrollwheel.js mas

      • zul fikar says:

        cara gabungkan gimna mas??

        $(document).ready(
        function() {
        $(“html”).niceScroll({touchbehavior:true});
        }
        );
        $(‘#left’).click(function () {
        var leftPos = $(‘div.outer_container’).scrollLeft();
        console.log(leftPos);
        $(“div.outer_container”).animate({
        scrollLeft: leftPos – 200
        }, 800);
        });

        $(‘#right’).click(function () {
        var leftPos = $(‘div.outer_container’).scrollLeft();
        console.log(leftPos);
        $(“div.outer_container”).animate({
        scrollLeft: leftPos + 200
        }, 800);
        });

        ??

  6. Qy says:

    Hmm….Mangstab2 coba deh (y)

  7. M A says:

    Ini bisa di pasang di blog.?
    Keren nih, tapi belum begitu paham JavaScript

  8. iskael says:

    tapi susah juga kalo diterapin di blog yang isinya tutorial
    orang ga bisa ngeklik dan copas code-nya

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development