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

http://jsfiddle.net/tovic/GuaHC/embedded/result,html,css,js/

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);
    }
})();