Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Event Mouse Wheel

Setiap peramban memiliki spesifikasi yang berbeda:

if (window.addEventListener) {
    // IE9, Chrome, Safari, Opera
    window.addEventListener("mousewheel", doScroll, false);
    // Firefox
    window.addEventListener("DOMMouseScroll", doScroll, false);
} else {
    // IE 6/7/8
    window.attachEvent("onmousewheel", doScroll);
}

Event ini akan memicu sebuah fungsi bernama doScroll (yang akan kita buat nanti) untuk bekerja saat mouse wheel digulung. Dimana nantinya doScroll akan dijadikan sebagai penayang nilai gulungan.

Nilainya hanya terdiri dari 1 atau -1, sekedar untuk menunjukkan apakah aksi yang terjadi adalah “menggulung ke atas” atau “menggulung ke bawah”:

var doScroll = function(e) {

    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    // Lakukan sesuatu dengan `delta`
    // (dalam contoh ini: menampilkan nilainya di dalam area `<body>`)
    document.body.innerHTML = delta;

    e.preventDefault(); // Tambahkan ini agar kerja `mouse whell` yang sesungguhnya bisa dimatikan

};

if (window.addEventListener) {
    // IE9, Chrome, Safari, Opera
    window.addEventListener("mousewheel", doScroll, false);
    // Firefox
    window.addEventListener("DOMMouseScroll", doScroll, false);
} else {
    // IE 6/7/8
    window.attachEvent("onmousewheel", doScroll);
}

Lihat Demo

Memperbaharui Nilai Setiap Kali Gulungan Terjadi

Pada demo di atas, setiap kali Anda menggulung di atas halaman, yang terjadi hanyalah sebuah penampakan angka 1 atau -1 yang akan muncul berdasarkan arah gulungan. Untuk membuat nilainya meningkat atau berkurang, buatlah sebuah variabel kosong di luar event tersebut dengan nilai 0 seperti ini:

var current = 0;

Setelah itu, tingkatkan/kurangi nilainya dengan cara menambahkan nilai delta ke current:

var current = 0;

var doScroll = function(e) {

    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    // Lakukan sesuatu dengan `delta`
    current = current + delta; // Tingkatkan/kurangi nilai `current` dengan `delta`
    document.body.innerHTML = current; // Tampilkan hasilnya di dalam `<body>`

    e.preventDefault();

};

Lihat Demo

Contoh Penerapan: Membuat Area Menggulung Secara Horizontal

Pada intinya di sini Saya menerapkan contoh nomor dua dengan cara memanfaatkan nilai yang dihasilkan untuk memanipulasi nilai properti left pada elemen agar elemen bisa bergerak ke kiri atau ke kanan berdasarkan arah gulungan. Supaya gerakannya lebih cepat, nilainya Saya kalikan dengan mean:

HTML

<div id="scroll-area">
    <div>

        <!-- Konten di sini... -->

    </div>
<div>

CSS

#scroll-area {
  width:400px;
  border:2px solid;
  background-color:#ccc;
  overflow:hidden;
}

#scroll-area div {
  width:3000px;
  position:relative; /* relative positioned */
  padding:10px 14px;
}

JavaScript

// Fake horizontal scrolling with mouse wheel
var elem = document.getElementById('scroll-area'),
    width = parseInt(elem.offsetWidth, 10),
    cldWidth = parseInt(elem.children[0].offsetWidth, 10),
    distance = cldWidth-width,
    mean = 40, // Just for multiplier (go faster or slower)
    current = 0;

elem.children[0].style.left = current + "px"; // Set default `left` value as `0` for initiation

var doScroll = function(e) {

    // cross-browser wheel delta
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    // (1 = scroll-up, -1 = scroll-down)
    // Always check the scroll distance, make sure that the scroll distance value will not
    // increased more than the container width and/or less than zero
    if ((delta == -1 && current*mean >= -distance) || (delta == 1 && current*mean < 0)) {
        current = current + delta;
    }

    // Move element to the left or right by updating the `left` value
    elem.children[0].style.left = (current*mean) + 'px';

    e.preventDefault();

};

if (elem.addEventListener) {
    elem.addEventListener("mousewheel", doScroll, false);
    elem.addEventListener("DOMMouseScroll", doScroll, false);
} else {
    elem.attachEvent("onmousewheel", doScroll);
}

Demo

Contoh Penerapan: Scroll Horizontal Satu Layar Penuh

Selengkapnya, silakan lihat dan pelajari kode sumbernya:

JavaScript

(function() {
    function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

        // Scroll to the left or right in `document.documentElement` and `document.body`
        document.documentElement.scrollLeft -= (delta * 40); // Multiplied by 40
        document.body.scrollLeft -= (delta * 40); // Multiplied by 40
        e.preventDefault();
    }
    if (window.addEventListener) {
        // IE9, Chrome, Safari, Opera
        window.addEventListener("mousewheel", scrollHorizontally, false);
        // Firefox
        window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
        // IE 6/7/8
        window.attachEvent("onmousewheel", scrollHorizontally);
    }
})();

Lihat Demo

  

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

 1 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Komunitas

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!