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